/* ════════════════════════════════════════════════════════════════════════
   tokens.css — design tokens · DESIGN SYSTEM OFICIAL "PULSE"
   Media Operations Platform — "Tudo no ar. O tempo todo."
   Tema principal: ESCURO (Centro de Operações). Claro = fallback do toggle.
   Base imutável: docs/03_DESIGN_SYSTEM.md · Marca: produto/02-BRANDING.md
   ════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Medium.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-SemiBold.woff2') format('woff2');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Bold.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/GeistMono-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}

:root {
  /* ════════ TIPOGRAFIA ════════ */
  --font-sans: 'Geist', Inter, ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'Courier New', monospace;
  /* números operacionais (248 TELAS ONLINE · 99.8% · 12s) usam --font-mono */

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  36px;
  --text-5xl:  48px;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --tracking-tight:   -0.02em;
  --tracking-tighter: -0.03em;
  --tracking-wide:     0.05em;
  --tracking-widest:   0.1em;

  /* ════════ CORES NEUTRAS (escala slate — base do PULSE) ════════ */
  --neutral-0:   #ffffff;
  --neutral-50:  #f8fafc;
  --neutral-100: #f1f5f9;
  --neutral-200: #e2e8f0;
  --neutral-300: #cbd5e1;
  --neutral-400: #94a3b8;
  --neutral-500: #64748b;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1e293b;
  --neutral-900: #0f172a;
  --neutral-950: #08111f;

  /* ════════ MARCA PULSE — superfícies do "centro de operações" ════════ */
  --pulse-bg:            #08111f;  /* Background  — fundo da operação        */
  --pulse-surface:       #0f172a;  /* Surface     — cards / painéis          */
  --pulse-elevated:      #172033;  /* Surface Elevated — menus, dropdowns    */
  --pulse-hover:         #1e293b;  /* hover de superfície                    */
  --pulse-border:        #263246;  /* Border                                 */
  --pulse-border-strong: #334155;  /* Border destacada                       */
  --pulse-text:          #ffffff;  /* Text Primary                           */
  --pulse-text-2:        #94a3b8;  /* Text Secondary                         */
  --pulse-text-3:        #64748b;  /* Text Muted                             */

  /* ════════ ACENTOS ════════ */
  /* Primary = azul operacional (já era o accent do projeto) */
  --accent-blue-50:    #eff6ff;
  --accent-blue-100:   #dbeafe;
  --accent-blue-400:   #60a5fa;
  --accent-blue-600:   #2563eb;   /* Primary       */
  --accent-blue-700:   #1d4ed8;   /* Primary Hover */

  /* Accent secundário = teal "sinal ativo / conectado" */
  --accent-teal-300:  #5eead4;
  --accent-teal-400:  #2dd4bf;
  --accent-teal-500:  #14b8a6;    /* Accent        */
  --accent-teal-600:  #0d9488;    /* Accent Hover  */

  /* Bases semânticas operacionais (PULSE) */
  --success-base: #16a34a;   /* NO AR        */
  --warning-base: #f59e0b;   /* ATUALIZANDO  */
  --danger-base:  #dc2626;   /* FORA DO AR   */
  --info-base:    #0ea5e9;   /* SEM SINAL / info */

  /* ════════ SEMÂNTICA (usar SEMPRE estas) — valores do tema CLARO ════════ */
  --bg:             var(--neutral-0);
  --bg-subtle:      var(--neutral-50);
  --bg-muted:       var(--neutral-100);
  --bg-inverted:    var(--neutral-900);

  --text:           var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-muted:     var(--neutral-500);
  --text-subtle:    var(--neutral-400);
  --text-inverted:  var(--neutral-0);

  --border:         var(--neutral-200);
  --border-strong:  var(--neutral-300);
  --border-subtle:  var(--neutral-100);

  --primary:        var(--accent-blue-600);
  --primary-hover:  var(--accent-blue-700);
  --primary-text:   #ffffff;

  --accent:         var(--accent-teal-500);
  --accent-hover:   var(--accent-teal-600);
  --accent-text:    #ffffff;

  --success:        var(--success-base);
  --success-bg:     color-mix(in srgb, var(--success-base) 12%, var(--bg));
  --success-border: color-mix(in srgb, var(--success-base) 28%, var(--bg));

  --info:           var(--info-base);
  --info-bg:        color-mix(in srgb, var(--info-base) 12%, var(--bg));
  --info-border:    color-mix(in srgb, var(--info-base) 28%, var(--bg));

  --warning:        var(--warning-base);
  --warning-bg:     color-mix(in srgb, var(--warning-base) 14%, var(--bg));
  --warning-border: color-mix(in srgb, var(--warning-base) 30%, var(--bg));

  --danger:         var(--danger-base);
  --danger-bg:      color-mix(in srgb, var(--danger-base) 12%, var(--bg));
  --danger-border:  color-mix(in srgb, var(--danger-base) 28%, var(--bg));

  /* ════════ ESPAÇAMENTOS (grid 4px) ════════ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ════════ RADIUS ════════ */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;   /* botões e inputs PULSE */
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-full: 9999px; /* badges / pills */

  /* ════════ ALVO DE TOQUE (mín. 48px — mobile first) ════════ */
  --touch-target: 48px;

  /* ════════ SHADOWS ════════ */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.08);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.12);
  --shadow-2xl: 0 24px 64px rgba(0,0,0,0.18);

  /* ════════ TRANSIÇÕES ════════ */
  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration:      250ms;
  --duration-slow: 400ms;

  /* ════════ Z-INDEX ════════ */
  --z-dropdown: 100;
  --z-modal:    500;
  --z-tooltip:  1000;
  --z-toast:    2000;
}

/* ════════════════════════════════════════════════════════════════════════
   TEMA ESCURO — TEMA PRINCIPAL DO PULSE (Centro de Operações)
   Sem preto puro. Navy profundo (Linear + Stripe Dashboard + Datadog).
   ════════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  --bg:             var(--pulse-surface);   /* #0F172A — cards/painéis      */
  --bg-subtle:      var(--pulse-bg);        /* #08111F — fundo da operação  */
  --bg-muted:       var(--pulse-elevated);  /* #172033 — superfície elevada */
  --bg-hover:       var(--pulse-hover);     /* #1E293B                      */
  --bg-inverted:    var(--neutral-0);

  --text:           var(--pulse-text);      /* #FFFFFF */
  --text-secondary: var(--pulse-text-2);    /* #94A3B8 */
  --text-muted:     var(--pulse-text-3);    /* #64748B */
  --text-subtle:    var(--neutral-600);     /* #475569 */
  --text-inverted:  var(--pulse-bg);

  --border:         var(--pulse-border);        /* #263246 */
  --border-strong:  var(--pulse-border-strong); /* #334155 */
  --border-subtle:  #1a2436;

  --primary:        var(--accent-blue-600);
  --primary-hover:  var(--accent-blue-700);
  --primary-text:   #ffffff;

  --accent:         var(--accent-teal-500);
  --accent-hover:   var(--accent-teal-600);

  /* tints semânticos sobre o navy (legíveis, sem glow) */
  --success-bg:     color-mix(in srgb, var(--success-base) 18%, var(--pulse-surface));
  --success-border: color-mix(in srgb, var(--success-base) 38%, var(--pulse-surface));
  --info-bg:        color-mix(in srgb, var(--info-base) 18%, var(--pulse-surface));
  --info-border:    color-mix(in srgb, var(--info-base) 38%, var(--pulse-surface));
  --warning-bg:     color-mix(in srgb, var(--warning-base) 18%, var(--pulse-surface));
  --warning-border: color-mix(in srgb, var(--warning-base) 38%, var(--pulse-surface));
  --danger-bg:      color-mix(in srgb, var(--danger-base) 18%, var(--pulse-surface));
  --danger-border:  color-mix(in srgb, var(--danger-base) 38%, var(--pulse-surface));

  --shadow-sm:  0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:  0 2px 8px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.6);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.7);
  --shadow-2xl: 0 24px 64px rgba(0,0,0,0.8);
}