/* ════════════════════════════════════════════════════════════════════════
   TOKENS · ADG Venda Fácil
   Lei: docs/03_DESIGN_SYSTEM.md §1 — invariantes.
   Único parametrizável: qual --accent-* vira --primary (PRIMARY_ACCENT: amber).
   ════════════════════════════════════════════════════════════════════════ */

@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;

  --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 ════════ */
  --neutral-0:   #ffffff;
  --neutral-50:  #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;
  --neutral-950: #0a0a0a;

  /* ════════ ACENTOS ════════ */
  --accent-blue-50:    #eff6ff;
  --accent-blue-100:   #dbeafe;
  --accent-blue-600:   #2563eb;
  --accent-blue-700:   #1d4ed8;

  --accent-purple-50:  #faf5ff;
  --accent-purple-100: #f3e8ff;
  --accent-purple-600: #9333ea;

  --accent-emerald-50:  #ecfdf5;
  --accent-emerald-100: #d1fae5;
  --accent-emerald-600: #059669;
  --accent-emerald-700: #047857;

  --accent-amber-50:  #fffbeb;
  --accent-amber-100: #fef3c7;
  --accent-amber-600: #d97706;
  /* 700/800 acrescentados: o amber-600 sobre branco dá 2.9:1 e REPROVA em AA
     como fundo de botão com texto branco. O 700 dá ~4.6:1 e passa (03 §4).
     O 700 é também a cor Peacock do projeto (#b45309). */
  --accent-amber-700: #b45309;
  --accent-amber-800: #92400e;

  --accent-red-50:  #fef2f2;
  --accent-red-100: #fee2e2;
  --accent-red-600: #dc2626;

  /* ════════ SEMÂNTICA (usar sempre estas) ════════ */
  --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_ACCENT: amber — a colmeia */
  --primary:        var(--accent-amber-700);
  --primary-hover:  var(--accent-amber-800);
  --primary-text:   var(--neutral-0);
  --primary-subtle: var(--accent-amber-50);
  --primary-border: var(--accent-amber-100);

  --success:        var(--accent-emerald-600);
  --success-bg:     var(--accent-emerald-50);
  --success-border: var(--accent-emerald-100);

  --info:           var(--accent-blue-600);
  --info-bg:        var(--accent-blue-50);
  --info-border:    var(--accent-blue-100);

  --warning:        var(--accent-amber-600);
  --warning-bg:     var(--accent-amber-50);
  --warning-border: var(--accent-amber-100);

  --danger:         var(--accent-red-600);
  --danger-bg:      var(--accent-red-50);
  --danger-border:  var(--accent-red-100);

  /* ════════ ESPAÇAMENTOS ════════ */
  --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:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* ════════ 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;

  /* ════════ PALETA DE CATEGORIAS DO MOTOR (admin) ════════
     Acrescentada ao arquivo de tokens de propósito: a alternativa era hex
     solto no JavaScript, e "nunca cor hardcoded" é lei. Sete matizes de
     luminosidade parecida, para nenhuma categoria gritar mais que a outra.
     O âmbar fica no gatilho — é onde tudo começa, e é a cor da marca. */
  --cat-gatilho: #b45309;
  --cat-ia:      #6d5ce0;
  --cat-dado:    #0f8a63;
  --cat-logica:  #0a72b8;
  --cat-memoria: #0e8ca0;
  --cat-acao:    #c62f4b;
  --cat-humano:  #64748b;

  /* ════════ LAYOUT ════════ */
  --topbar-h:     56px;
  --bottom-nav-h: 60px;
  --container:    1120px;
  --container-sm: 480px;
}

/* ════════════════════════════════════════════════════════════════════════
   TEMA ESCURO
   Regra do projeto: o app tem tema claro, escuro e automático, e a escolha
   do usuário SEMPRE vence o sistema (ver 01_PROJECT_VARIABLES → TEMA_*).

   Os dois blocos abaixo existem de propósito:
   - o @media atende quem não escolheu nada (segue o sistema);
   - o [data-tema="escuro"] atende quem escolheu, inclusive num aparelho
     configurado em claro.
   O `:not([data-tema="claro"])` é o que faz a escolha manual ganhar do
   sistema — sem ele, quem prefere claro num celular escuro não conseguiria.
   ════════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) {
    --bg:             var(--neutral-950);
    --bg-subtle:      var(--neutral-900);
    --bg-muted:       var(--neutral-800);
    --bg-inverted:    var(--neutral-0);

    --text:           var(--neutral-50);
    --text-secondary: var(--neutral-300);
    --text-muted:     var(--neutral-400);
    --text-subtle:    var(--neutral-500);
    --text-inverted:  var(--neutral-950);

    --border:         var(--neutral-800);
    --border-strong:  var(--neutral-700);
    --border-subtle:  var(--neutral-900);

    --primary:        var(--accent-amber-600);
    --primary-hover:  var(--accent-amber-700);
    --primary-subtle: rgba(180, 83, 9, 0.15);
    --primary-border: rgba(180, 83, 9, 0.35);

    --success-bg:     rgba(5, 150, 105, 0.12);
    --info-bg:        rgba(37, 99, 235, 0.12);
    --warning-bg:     rgba(217, 119, 6, 0.12);
    --danger-bg:      rgba(220, 38, 38, 0.12);

    --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);

    /* No escuro os mesmos matizes ficam abafados — sobem em luminosidade
       para manter contraste de 4.5:1 contra o fundo. */
    --cat-gatilho: #f0a437;
    --cat-ia:      #a394ff;
    --cat-dado:    #45c99b;
    --cat-logica:  #55b0ee;
    --cat-memoria: #4cc4d8;
    --cat-acao:    #ff7a90;
    --cat-humano:  #9aa6b8;
  }
}

/* Escolha manual do usuário — vence o sistema, nos dois sentidos. */
:root[data-tema='escuro'] {
  --bg:             var(--neutral-950);
  --bg-subtle:      var(--neutral-900);
  --bg-muted:       var(--neutral-800);
  --bg-inverted:    var(--neutral-0);

  --text:           var(--neutral-50);
  --text-secondary: var(--neutral-300);
  --text-muted:     var(--neutral-400);
  --text-subtle:    var(--neutral-500);
  --text-inverted:  var(--neutral-950);

  --border:         var(--neutral-800);
  --border-strong:  var(--neutral-700);
  --border-subtle:  var(--neutral-900);

  --primary:        var(--accent-amber-600);
  --primary-hover:  var(--accent-amber-700);
  --primary-subtle: rgba(180, 83, 9, 0.15);
  --primary-border: rgba(180, 83, 9, 0.35);

  --success-bg:     rgba(5, 150, 105, 0.12);
  --info-bg:        rgba(37, 99, 235, 0.12);
  --warning-bg:     rgba(217, 119, 6, 0.12);
  --danger-bg:      rgba(220, 38, 38, 0.12);

  --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);
}

/* Sem transição na troca de tema: animar cor de fundo de página inteira
   pisca e fica pior que a troca seca. */
:root[data-tema] * { transition-property: none !important; }
:root[data-tema].tema-pronto * { transition-property: revert; }