/* ==========================================================================
   Boomit — tokens de cor, tipografia, espaço e raio
   Gerado por scripts/generate_tokens.py. Todos os pares texto/fundo abaixo
   foram auditados contra a WCAG 2.1 AA.

   Regra de ouro: componentes consomem os tokens SEMÂNTICOS (--bg-*, --text-*,
   --border-*, --action-*, --status-*). As escalas cruas (--ink-*, --moss-*,
   --clay-*, --terra-*) existem só para alimentar os semânticos. Usar uma
   escala crua direto num componente é o que faz um design system apodrecer:
   quando a marca mudar, ninguém consegue achar todos os lugares.
   ========================================================================== */

:root {
  /* --- Cores oficiais do manual — imutáveis ----------------------------- */
  --boomit-preto: #1B1B1C;   /* Pantone 419 C  — principal */
  --boomit-verde: #545E54;   /* Pantone 4199 C — principal */
  --boomit-apoio-01: #F2F2F2; /* Pantone 9062 C */
  --boomit-apoio-02: #C6CFD1; /* Pantone 5455 C */
  --boomit-apoio-03: #EDE9E4; /* Pantone Cool Gray 1 C */
  --boomit-apoio-04: #9D9482; /* Pantone 6205 C */

  /* --- Escalas derivadas (OKLCH, luminância ancorada nas cores oficiais) - */
  --ink-50:  #F2F2F3;  --ink-100: #EAEAEB;  --ink-200: #CDCDCE;
  --ink-300: #B7B7B8;  --ink-400: #959596;  --ink-500: #7A7A7B;
  --ink-600: #5B5B5C;  --ink-700: #424243;  --ink-800: #2E2E2F;
  --ink-900: #242425;  --ink-950: #1B1B1C;

  --moss-50:  #EBF5EB; --moss-100: #E3EDE3; --moss-200: #C6D0C6;
  --moss-300: #B1BBB0; --moss-400: #8E988E; --moss-500: #737E73;
  --moss-600: #545E54; --moss-700: #3C453C; --moss-800: #283028;
  --moss-900: #1E271F; --moss-950: #161E16;

  --clay-50:  #FAF1E0; --clay-100: #F2E9D7; --clay-200: #D5CCBA;
  --clay-300: #BFB6A4; --clay-400: #9D9482; --clay-500: #827968;
  --clay-600: #625A4A; --clay-700: #494133; --clay-800: #332D20;
  --clay-900: #292317; --clay-950: #201A0E;

  --terra-50:  #FFE4E7; --terra-100: #FFDCDE; --terra-200: #F0BFC1;
  --terra-300: #DAA9AC; --terra-400: #B78689; --terra-500: #9A6C6F;
  --terra-600: #774E51; --terra-700: #5C3639; --terra-800: #442225;
  --terra-900: #39181C; --terra-950: #2F1014;

  /* --- Tipografia ------------------------------------------------------- */
  --font-sans: "PP Mori", "Inter", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --weight-regular: 400;   /* PPMori-Regular  — corpo de texto */
  --weight-medium: 500;    /* PPMori-Medium   — rótulos, botões, dados */
  --weight-semibold: 600;  /* PPMori-SemiBold — títulos. É o peso mais forte
                              que a marca tem: não existe bold/800 na Boomit. */

  /* Escala tipográfica — razão 1.2, ancorada em 16px */
  --text-xs:   0.75rem;  --leading-xs:   1.125rem;
  --text-sm:   0.875rem; --leading-sm:   1.25rem;
  --text-base: 1rem;     --leading-base: 1.5rem;
  --text-lg:   1.125rem; --leading-lg:   1.75rem;
  --text-xl:   1.375rem; --leading-xl:   1.875rem;
  --text-2xl:  1.75rem;  --leading-2xl:  2.125rem;
  --text-3xl:  2.25rem;  --leading-3xl:  2.5rem;
  --text-4xl:  3rem;     --leading-4xl:  3.25rem;

  /* A logo é desenhada com muito espaço entre letras. Títulos grandes em
     caixa alta ecoam isso; texto corrido nunca leva tracking. */
  --tracking-display: 0.08em;
  --tracking-normal: 0;

  /* --- Espaço — grade de 4px -------------------------------------------- */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;    --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem;   --space-20: 5rem;   --space-24: 6rem;

  /* --- Raio — o "B" e o elemento 3D são cantos generosos, nunca vivos --- */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;   /* padrão de inputs e botões */
  --radius-lg: 1rem;       /* cards */
  --radius-xl: 1.5rem;     /* painéis e modais */
  --radius-full: 9999px;   /* badges e avatares */

  /* --- Elevação — sombra neutra e discreta, nunca colorida -------------- */
  --shadow-sm: 0 1px 2px rgba(27, 27, 28, 0.06);
  --shadow-md: 0 2px 8px rgba(27, 27, 28, 0.08);
  --shadow-lg: 0 8px 24px rgba(27, 27, 28, 0.10);

  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
}

/* ==========================================================================
   MODO CLARO (padrão)
   ========================================================================== */
:root,
[data-theme="light"] {
  --bg-canvas: var(--boomit-apoio-01);   /* fundo da página */
  --bg-surface: #FFFFFF;                 /* cards, tabelas, modais */
  --bg-surface-warm: var(--boomit-apoio-03); /* blocos editoriais, vazios */
  --bg-muted: var(--ink-100);            /* linhas zebradas, skeletons */
  --bg-inverse: var(--ink-950);
  --bg-brand: var(--boomit-verde);
  --bg-brand-subtle: var(--moss-100);

  --text-primary: var(--ink-950);        /* 15.4:1 */
  --text-secondary: var(--ink-700);      /*  9.0:1 */
  --text-tertiary: var(--ink-600);       /*  6.1:1 — mínimo aceitável */
  --text-inverse: var(--boomit-apoio-03);
  --text-brand: var(--boomit-verde);     /*  6.0:1 */
  --text-on-brand: #FFFFFF;              /*  6.8:1 sobre o verde */

  --border-subtle: var(--ink-200);       /* divisores, sem função semântica */
  --border-default: var(--ink-300);      /* contorno de card */
  --border-strong: var(--ink-500);       /* contorno de input — 4.3:1 */
  --focus-ring: var(--boomit-verde);

  --action-primary-bg: var(--ink-950);
  --action-primary-bg-hover: var(--ink-800);
  --action-primary-fg: #FFFFFF;
  --action-brand-bg: var(--boomit-verde);
  --action-brand-bg-hover: var(--moss-700);
  --action-brand-fg: #FFFFFF;
  --action-ghost-hover: var(--ink-100);
  --action-disabled-bg: var(--ink-200);
  --action-disabled-fg: var(--ink-500);

  --status-success-fg: var(--moss-700);
  --status-success-bg: var(--moss-100);
  --status-success-border: var(--moss-200);
  --status-warning-fg: var(--clay-700);
  --status-warning-bg: var(--clay-100);
  --status-warning-border: var(--clay-200);
  --status-danger-fg: var(--terra-700);
  --status-danger-bg: var(--terra-100);
  --status-danger-border: var(--terra-200);
  --status-info-fg: var(--ink-700);
  --status-info-bg: var(--boomit-apoio-02);
  --status-info-border: var(--ink-200);
  --status-neutral-fg: var(--ink-700);
  --status-neutral-bg: var(--ink-100);
  --status-neutral-border: var(--ink-200);
}

/* ==========================================================================
   MODO ESCURO
   O manual já prevê fundo escuro (logo e grafismo têm versão clara). O canvas
   é o preto oficial; as superfícies sobem em luminância, nunca descem.
   ========================================================================== */
[data-theme="dark"] {
  --bg-canvas: var(--ink-950);
  --bg-surface: var(--ink-900);
  --bg-surface-warm: var(--ink-800);
  --bg-muted: var(--ink-800);
  --bg-inverse: var(--boomit-apoio-03);
  --bg-brand: var(--boomit-verde);
  --bg-brand-subtle: var(--moss-900);

  --text-primary: var(--boomit-apoio-03); /* 14.2:1 */
  --text-secondary: var(--ink-300);       /*  8.6:1 */
  --text-tertiary: var(--ink-400);        /*  5.8:1 */
  --text-inverse: var(--ink-950);
  --text-brand: var(--moss-300);          /*  8.7:1 — o verde oficial não tem
                                             contraste no escuro; use o 300 */
  --text-on-brand: #FFFFFF;

  --border-subtle: var(--ink-800);
  --border-default: var(--ink-700);
  --border-strong: var(--ink-500);        /*  3.6:1 sobre a superfície */
  --focus-ring: var(--moss-300);

  --action-primary-bg: var(--boomit-apoio-03);
  --action-primary-bg-hover: #FFFFFF;
  --action-primary-fg: var(--ink-950);
  --action-brand-bg: var(--boomit-verde);
  --action-brand-bg-hover: var(--moss-500);
  --action-brand-fg: #FFFFFF;
  --action-ghost-hover: var(--ink-800);
  --action-disabled-bg: var(--ink-800);
  --action-disabled-fg: var(--ink-600);

  --status-success-fg: var(--moss-300);
  --status-success-bg: var(--moss-900);
  --status-success-border: var(--moss-700);
  --status-warning-fg: var(--clay-300);
  --status-warning-bg: var(--clay-900);
  --status-warning-border: var(--clay-700);
  --status-danger-fg: var(--terra-300);
  --status-danger-bg: var(--terra-900);
  --status-danger-border: var(--terra-700);
  --status-info-fg: var(--ink-300);
  --status-info-bg: var(--ink-800);
  --status-info-border: var(--ink-700);
  --status-neutral-fg: var(--ink-300);
  --status-neutral-bg: var(--ink-800);
  --status-neutral-border: var(--ink-700);

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

/* --- Base ---------------------------------------------------------------- */
html {
  background-color: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* O anel de foco é a única coisa no sistema que nunca pode ser removida:
   parte dos avaliados navega por teclado. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}