/* ==========================================================================
   EVO Design System — Design Tokens (CSS Custom Properties)
   Fonte / Source: EVO Brandbook (draft v2), seções 3, 5, 6, 8, 9, 11, 15, 16
   Domínio oficial: evo.digital · E-mail: nome.sobrenome@evo.digital
   Versão / Version: 1.0.0-draft
   --------------------------------------------------------------------------
   Camadas / Layers
     1. Primitivos  (--evo-*)      valores crus da marca, nunca use direto na UI
     2. Semânticos  (--color-*, --space-*, --text-*, --radius-*, --shadow-*)
     3. Componente  (--btn-*, --field-*, --card-*)  herdam dos semânticos
   Regra / Rule: componentes consomem SEMÂNTICOS. Primitivos só alimentam
   os semânticos. Isso é o que permite tema claro/escuro e modos de expressão.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------- 1. PRIMITIVOS — MARCA / BRAND PRIMITIVES -------------------- */
  /* Legado (primárias do brandbook) */
  --evo-navy: #081680;         /* Legacy Navy       */
  --evo-cyan: #75BADE;         /* Legacy Sky / EVO Cyan */
  --evo-gold: #DEB255;         /* Legacy Gold       */
  --evo-warm-gray: #D5D1C8;    /* Warm Gray         */
  --evo-steel: #5B5E63;        /* Steel             */
  /* Expansão da paleta */
  --evo-coral: #EB6964;
  --evo-aqua: #5DCAC5;
  --evo-cream: #F1EDE5;
  --evo-white: #FFFFFF;

  /* ---------- 1.1 RAMPAS / RAMPS ---------------------------------------- */
  --navy-50: #EEF1FB;  --navy-100: #D9DFF6; --navy-200: #B0BCEC;
  --navy-300: #7F90DE; --navy-400: #4C5FC4; --navy-500: #2233A5;
  --navy-600: #081680; --navy-700: #071269; --navy-800: #050D4C;
  --navy-900: #030830;

  --cyan-50: #F0F9FD;  --cyan-100: #DCF0FA; --cyan-200: #B9E1F4;
  --cyan-300: #94CFEB; --cyan-400: #75BADE; --cyan-500: #4B9FC9;
  --cyan-600: #2F80A9; --cyan-700: #226384; --cyan-800: #1A4A62;
  --cyan-900: #123342;

  --aqua-50: #EFFAF9;  --aqua-100: #D7F4F2; --aqua-200: #AEE9E6;
  --aqua-300: #83DCD8; --aqua-400: #5DCAC5; --aqua-500: #3AABA6;
  --aqua-600: #268A86; --aqua-700: #1E6D6A; --aqua-800: #185452;
  --aqua-900: #113B39;

  --gold-50: #FDF7EC;  --gold-100: #FAEDD3; --gold-200: #F3D9A5;
  --gold-300: #EAC578; --gold-400: #DEB255; --gold-500: #C4963B;
  --gold-600: #A0782C; --gold-700: #7C5D23; --gold-800: #5E461C;
  --gold-900: #3F2F13;

  --coral-50: #FEF1F0;  --coral-100: #FDDEDC; --coral-200: #FABDB9;
  --coral-300: #F49792; --coral-400: #EB6964; --coral-500: #D14742;
  --coral-600: #AE332F; --coral-700: #8A2724; --coral-800: #6A1E1C;
  --coral-900: #491413;

  /* Neutros: Cream e Warm Gray ancoram os claros, Steel ancora os escuros */
  --neutral-0: #FFFFFF;   --neutral-25: #FBFAF8;  --neutral-50: #F1EDE5;
  --neutral-100: #E8E4DB; --neutral-200: #D5D1C8; --neutral-300: #B8B4AB;
  --neutral-400: #94918A; --neutral-500: #74777B; --neutral-600: #5B5E63;
  --neutral-700: #44474B; --neutral-800: #2E3134; --neutral-900: #1B1D20;
  --neutral-950: #0E1013;

  /* Superfícies escuras derivadas do Navy (grafismo "fundo escuro", §5) */
  --ink-canvas: #060A1E; --ink-surface: #0C1230; --ink-raised: #141B41;
  --ink-border: #242C5C; --ink-fg: #F4F6FD;      --ink-fg-muted: #A9B2D6;

  /* ---------- 2. SEMÂNTICOS — COR / COLOR ------------------------------- */
  --color-bg-canvas: var(--neutral-25);
  --color-bg-surface: var(--neutral-0);
  --color-bg-raised: var(--neutral-0);
  --color-bg-sunken: var(--neutral-50);
  --color-bg-subtle: var(--neutral-50);
  --color-bg-inverse: var(--navy-600);
  --color-bg-brand-subtle: var(--navy-50);
  --color-bg-accent-subtle: var(--cyan-50);

  --color-fg-default: var(--navy-900);
  --color-fg-muted: var(--neutral-600);
  --color-fg-subtle: var(--neutral-400);
  --color-fg-brand: var(--navy-600);
  --color-fg-accent: var(--cyan-600);
  --color-fg-inverse: var(--neutral-0);
  --color-fg-on-brand: var(--neutral-0);

  --color-border-subtle: var(--neutral-100);
  --color-border-default: var(--neutral-200);
  --color-border-strong: var(--neutral-300);
  --color-border-brand: var(--navy-600);
  --color-border-inverse: var(--ink-border);

  /* Ações */
  --color-action-primary-bg: var(--navy-600);
  --color-action-primary-bg-hover: var(--navy-700);
  --color-action-primary-bg-active: var(--navy-800);
  --color-action-primary-fg: var(--neutral-0);
  --color-action-secondary-bg: transparent;
  --color-action-secondary-border: var(--navy-600);
  --color-action-secondary-fg: var(--navy-600);
  --color-action-secondary-bg-hover: var(--navy-50);
  --color-action-tertiary-fg: var(--navy-600);
  --color-action-tertiary-bg-hover: var(--navy-50);
  --color-action-disabled-bg: var(--neutral-100);
  --color-action-disabled-fg: var(--neutral-400);

  /* Feedback — mapeado apenas com cores de marca (ver §Acessibilidade) */
  --color-feedback-info-fg: var(--cyan-700);
  --color-feedback-info-bg: var(--cyan-50);
  --color-feedback-info-border: var(--cyan-200);
  --color-feedback-success-fg: var(--aqua-700);
  --color-feedback-success-bg: var(--aqua-50);
  --color-feedback-success-border: var(--aqua-200);
  --color-feedback-warning-fg: var(--gold-700);
  --color-feedback-warning-bg: var(--gold-50);
  --color-feedback-warning-border: var(--gold-200);
  --color-feedback-danger-fg: var(--coral-700);
  --color-feedback-danger-bg: var(--coral-50);
  --color-feedback-danger-border: var(--coral-200);

  --color-focus-ring: var(--cyan-500);
  --color-focus-ring-inverse: var(--cyan-300);
  --color-selection-bg: var(--navy-100);

  /* Data viz — ordem categórica obrigatória */
  --dataviz-1: var(--navy-500);
  --dataviz-2: var(--aqua-400);
  --dataviz-3: var(--cyan-400);
  --dataviz-4: var(--gold-400);
  --dataviz-5: var(--coral-400);
  --dataviz-6: var(--navy-800);
  --dataviz-7: var(--steel, #5B5E63);
  --dataviz-grid: var(--neutral-100);
  --dataviz-axis: var(--neutral-400);

  /* ---------- 2.1 TIPOGRAFIA / TYPOGRAPHY -------------------------------- */
  /* Tipografia oficial aprovada em julho/2026. Figtree: SIL OFL 1.1. JetBrains Mono: Apache 2.0. */
  --font-display: "Figtree", "Segoe UI", system-ui, sans-serif;
  --font-text: "Figtree", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --text-display-xl: 700 4rem/1.02 var(--font-display);
  --text-display-lg: 700 3.25rem/1.05 var(--font-display);
  --text-display-md: 700 2.625rem/1.08 var(--font-display);
  --text-h1: 700 2.125rem/1.15 var(--font-display);
  --text-h2: 700 1.75rem/1.2 var(--font-display);
  --text-h3: 600 1.4375rem/1.25 var(--font-display);
  --text-h4: 600 1.1875rem/1.35 var(--font-display);
  --text-body-lg: 400 1.125rem/1.6 var(--font-text);
  --text-body: 400 1rem/1.6 var(--font-text);
  --text-body-sm: 400 0.875rem/1.55 var(--font-text);
  --text-caption: 400 0.8125rem/1.45 var(--font-text);
  --text-overline: 600 0.75rem/1.2 var(--font-text);
  --text-mono: 400 0.8125rem/1.5 var(--font-mono);

  --tracking-display: -0.022em;
  --tracking-heading: -0.014em;
  --tracking-body: 0em;
  --tracking-overline: 0.08em;

  --measure-short: 44ch;   /* títulos e leads   */
  --measure-default: 68ch; /* texto corrido     */
  --measure-long: 78ch;    /* documentos longos */

  /* ---------- 2.2 ESPAÇAMENTO / SPACING (base 4px) ----------------------- */
  --space-0: 0;      --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;  --space-32: 8rem;

  /* ---------- 2.3 GRID E LAYOUT ----------------------------------------- */
  --grid-columns: 12;
  --grid-gutter: var(--space-6);
  --layout-margin-sm: var(--space-4);
  --layout-margin-md: var(--space-8);
  --layout-margin-lg: var(--space-12);
  --layout-max-content: 1280px;
  --layout-max-prose: 720px;
  --breakpoint-sm: 480px;  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px; --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1600px;

  /* ---------- 2.4 RAIO / RADIUS ----------------------------------------- */
  --radius-xs: 4px;  --radius-sm: 8px;  --radius-md: 12px;
  --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ---------- 2.5 ELEVAÇÃO / ELEVATION (sombra tingida de Navy) --------- */
  --shadow-1: 0 1px 2px rgba(8,22,128,.06), 0 1px 3px rgba(8,22,128,.04);
  --shadow-2: 0 2px 4px rgba(8,22,128,.05), 0 6px 16px -4px rgba(8,22,128,.08);
  --shadow-3: 0 4px 8px rgba(8,22,128,.05), 0 16px 32px -8px rgba(8,22,128,.10);
  --shadow-4: 0 8px 16px rgba(8,22,128,.07), 0 32px 64px -12px rgba(8,22,128,.14);
  --shadow-focus: 0 0 0 3px rgba(75,159,201,.45);

  /* ---------- 2.6 MOVIMENTO / MOTION ----------------------------------- */
  --duration-instant: 90ms;  --duration-fast: 140ms;
  --duration-normal: 200ms;  --duration-slow: 320ms;
  --duration-deliberate: 480ms;
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-in: cubic-bezier(.4,0,1,1);

  /* ---------- 2.7 ALVOS E FOCO / TARGETS ------------------------------- */
  --target-min: 44px;
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* ---------- 3. COMPONENTE / COMPONENT -------------------------------- */
  --btn-height-sm: 36px; --btn-height-md: 44px; --btn-height-lg: 52px;
  --btn-padding-x: var(--space-5);
  --btn-radius: var(--radius-pill);
  --btn-font: 600 0.9375rem/1 var(--font-text);

  --field-height: 44px;
  --field-radius: var(--radius-sm);
  --field-border: var(--color-border-strong);
  --field-border-focus: var(--color-focus-ring);
  --field-bg: var(--color-bg-surface);
  --field-placeholder: var(--color-fg-subtle);

  --card-radius: var(--radius-lg);
  --card-padding: var(--space-6);
  --card-bg: var(--color-bg-surface);
  --card-border: var(--color-border-subtle);
  --card-shadow: var(--shadow-1);
  --card-shadow-hover: var(--shadow-3);

  --table-row-height: 48px;
  --table-row-height-dense: 36px;
  --table-header-bg: var(--color-bg-sunken);
  --table-border: var(--color-border-subtle);

  --nav-height: 72px;
  --nav-bg: rgba(255,255,255,.86);
  --nav-border: var(--color-border-subtle);
}

/* ==========================================================================
   TEMA ESCURO / DARK THEME
   Só os semânticos mudam. Primitivos permanecem idênticos.
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --color-bg-canvas: var(--ink-canvas);
  --color-bg-surface: var(--ink-surface);
  --color-bg-raised: var(--ink-raised);
  --color-bg-sunken: #04081A;
  --color-bg-subtle: var(--ink-raised);
  --color-bg-inverse: var(--neutral-0);
  --color-bg-brand-subtle: rgba(117,186,222,.10);
  --color-bg-accent-subtle: rgba(117,186,222,.14);

  --color-fg-default: var(--ink-fg);
  --color-fg-muted: var(--ink-fg-muted);
  --color-fg-subtle: #7C86AF;
  --color-fg-brand: var(--cyan-300);
  --color-fg-accent: var(--cyan-300);
  --color-fg-inverse: var(--navy-900);
  --color-fg-on-brand: var(--navy-900);

  --color-border-subtle: rgba(255,255,255,.08);
  --color-border-default: var(--ink-border);
  --color-border-strong: #38427A;
  --color-border-brand: var(--cyan-400);

  --color-action-primary-bg: var(--cyan-300);
  --color-action-primary-bg-hover: var(--cyan-200);
  --color-action-primary-bg-active: var(--cyan-400);
  --color-action-primary-fg: var(--navy-900);
  --color-action-secondary-border: var(--cyan-300);
  --color-action-secondary-fg: var(--cyan-300);
  --color-action-secondary-bg-hover: rgba(117,186,222,.12);
  --color-action-tertiary-fg: var(--cyan-300);
  --color-action-tertiary-bg-hover: rgba(117,186,222,.12);
  --color-action-disabled-bg: rgba(255,255,255,.08);
  --color-action-disabled-fg: #6A739C;

  --color-feedback-info-fg: var(--cyan-200);
  --color-feedback-info-bg: rgba(117,186,222,.12);
  --color-feedback-info-border: rgba(117,186,222,.32);
  --color-feedback-success-fg: var(--aqua-200);
  --color-feedback-success-bg: rgba(93,202,197,.12);
  --color-feedback-success-border: rgba(93,202,197,.32);
  --color-feedback-warning-fg: var(--gold-200);
  --color-feedback-warning-bg: rgba(222,178,85,.14);
  --color-feedback-warning-border: rgba(222,178,85,.34);
  --color-feedback-danger-fg: var(--coral-200);
  --color-feedback-danger-bg: rgba(235,105,100,.14);
  --color-feedback-danger-border: rgba(235,105,100,.34);

  --color-focus-ring: var(--cyan-300);
  --color-selection-bg: rgba(117,186,222,.28);

  --dataviz-1: var(--cyan-300);
  --dataviz-2: var(--aqua-300);
  --dataviz-3: var(--navy-300);
  --dataviz-4: var(--gold-300);
  --dataviz-5: var(--coral-300);
  --dataviz-6: #C9D2F5;
  --dataviz-7: #8892C0;
  --dataviz-grid: rgba(255,255,255,.09);
  --dataviz-axis: #7C86AF;

  /* Elevação no escuro: luz vem do brilho da borda, não da sombra */
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 4px 12px rgba(0,0,0,.45);
  --shadow-3: 0 12px 32px rgba(0,0,0,.5);
  --shadow-4: 0 24px 64px rgba(0,0,0,.6);
  --shadow-focus: 0 0 0 3px rgba(148,207,235,.5);

  --nav-bg: rgba(12,18,48,.86);
}

/* ==========================================================================
   MODOS DE EXPRESSÃO / EXPRESSION MODES
   Um núcleo, cinco ênfases. Só o acento expressivo e o raio mudam —
   nunca a tipografia, o logo ou a semântica de feedback.
   ========================================================================== */
[data-mode="expressive"] { /* B2C */
  --color-fg-accent: var(--coral-500);
  --color-bg-accent-subtle: var(--coral-50);
  --color-bg-canvas: var(--evo-cream);
  --radius-lg: 20px; --radius-xl: 28px; --card-radius: 20px;
}
[data-mode="business"] {   /* B2S + B2B */
  --color-fg-accent: var(--cyan-600);
  --color-bg-canvas: var(--neutral-25);
  --card-radius: var(--radius-md);
}
[data-mode="institutional"] { /* B2G */
  --color-fg-accent: var(--navy-600);
  --color-fg-muted: var(--neutral-700);
  --color-border-default: var(--neutral-300);
  --card-radius: var(--radius-sm);
  --focus-ring-width: 4px;
}
[data-mode="infrastructure"] { /* B2W */
  --color-fg-accent: var(--cyan-500);
  --color-bg-canvas: var(--neutral-50);
  --font-text: "JetBrains Mono", "Figtree", system-ui, sans-serif;
  --table-row-height: var(--table-row-height-dense);
  --card-radius: var(--radius-xs);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 1ms; --duration-fast: 1ms; --duration-normal: 1ms;
    --duration-slow: 1ms;    --duration-deliberate: 1ms;
  }
}