/* ═══════════════════════════════════════════════════════════════════════════
   THEMMIS · Design System Tokens · v1 Quiet Luxury (realign R2)
   ───────────────────────────────────────────────────────────────────────────
   Fonte canônica: C:\projetos\THEMMIS\design-system.html (1236 linhas).
   Realinhamento R2 (2026-05-18) · vide docs/ds-migration/R1-DELTAS.md
   e bloco "CORREÇÃO DE ROTA" em docs/ds-migration/01-PIVOT-NOTES.md.

   PRINCÍPIOS
   ──────────
   • Quiet luxury · paleta beige + preto absoluto + escala neutral envelhecida
   • Hierarquia comercial via tipografia (weight/scale/tracking), NÃO via cor
   • Vermelho reservado para error states genuínos · nunca para preço-promo
   • Action primary = preto puro (light) / off-white (dark) · sem accent colorido
   • Manrope (4 weights 400/500/600/700) self-hosted · LGPD strict
   • Tipografia em rem (base 16px) para acessibilidade
   • Easing snappier (0.2,0,0,1) coerente com a disciplina visual do v1

   CASCATA
   ───────
     1. fonts.css         (@font-face Manrope, preservado da Fase 2)
     2. legacy-aliases.css (bridge FdC + v1 → recalibrado em R3/R4)
     3. ESTE arquivo       (semantic + primitive tokens v1)
     4. reset.css          (modern-normalize)
     5. base.css           (html/body/typography globais via tokens)
     6. utilities.css      (container/stack/cluster/grid + .eyebrow/.headline/.pattern-bg)
     7. components/*.css   (1 arquivo por componente · R3 re-skin pendente)
     8. style.css          (legado · recebe tokens via bridge)
     9. components.css     (legado · idem)
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('./fonts.css');
@import url('./reset.css');
@import url('./base.css');
@import url('./utilities.css');
@import url('./legacy-aliases.css');


:root, [data-theme="light"] {

  /* ─────────────────────────────────────────────────────────────────────────
     §1 · BASE — Superfícies (light theme · default)
     ─────────────────────────────────────────────────────────────────────── */
  --bg-base:           #F3F0E9;   /* off-white beige quente · quiet luxury */
  --bg-raised:         #FFFFFF;   /* cards/modal · superfície elevada */
  --bg-sunken:         #E5E1D6;   /* hover · divisores · sections recuadas */
  --bg-inverse:        #000000;   /* footer dark · banners institucionais */

  /* Aliases v2 semânticos (mantidos para consumidores existentes herdarem) */
  --bg-light:          var(--bg-base);
  --bg-light-elevated: var(--bg-raised);
  --bg-light-muted:    var(--bg-sunken);

  /* ─────────────────────────────────────────────────────────────────────────
     §2 · TEXTO (light theme)
     ─────────────────────────────────────────────────────────────────────── */
  --fg-base:           #000000;   /* preto absoluto · headings, body primário */
  --fg-muted:          #54503F;   /* texto secundário · helper text */
  --fg-subtle:         #78725E;   /* texto terciário · placeholders, captions */
  --fg-on-inverse:     #F3F0E9;   /* texto sobre bg-inverse (footer dark) */

  /* Aliases v2 (preservam consumidores) */
  --text-on-light:     var(--fg-base);
  --text-on-light-mut: var(--fg-muted);

  /* ─────────────────────────────────────────────────────────────────────────
     §3 · BORDAS (light theme)
     ─────────────────────────────────────────────────────────────────────── */
  --border-subtle:     #E5E1D6;   /* dividers sutis · table rows */
  --border-default:    #C9C3B2;   /* inputs · cards */
  --border-strong:     #38342A;   /* outline button · ênfase */

  --border-light:      var(--border-subtle);  /* alias v2 */

  /* ─────────────────────────────────────────────────────────────────────────
     §4 · ACTION PRIMARY (light theme) — substitui --accent removido
     ─────────────────────────────────────────────────────────────────────── */
  --action-primary:        #000000;   /* CTA primary · focus ring · underline ativo */
  --action-primary-hover:  #1F1C16;
  --action-primary-active: #38342A;
  --action-on-primary:     #F3F0E9;   /* texto sobre action-primary */

  /* ─────────────────────────────────────────────────────────────────────────
     §5 · PATTERN (background institucional · vide design-system.html §22)
     ─────────────────────────────────────────────────────────────────────── */
  --pattern-color: rgba(0, 0, 0, 0.04);

  /* ─────────────────────────────────────────────────────────────────────────
     §6 · NEUTRAL SCALE (escala completa · derivada do design-system.html)
     ─────────────────────────────────────────────────────────────────────── */
  --neutral-50:  #FAF8F3;
  --neutral-100: #F3F0E9;   /* = --bg-base */
  --neutral-200: #E5E1D6;   /* = --bg-sunken · --border-subtle */
  --neutral-300: #C9C3B2;   /* = --border-default */
  --neutral-400: #A39C87;
  --neutral-500: #78725E;   /* = --fg-subtle */
  --neutral-600: #54503F;   /* = --fg-muted */
  --neutral-700: #38342A;   /* = --border-strong */
  --neutral-800: #1F1C16;
  --neutral-900: #0F0D09;
  --neutral-950: #000000;   /* = --fg-base · --action-primary */

  /* ─────────────────────────────────────────────────────────────────────────
     §7 · FEEDBACK PAIRS (R2 calibrados · WCAG AA garantido em ambos os temas)
     ─────────────────────────────────────────────────────────────────────── */
  /* Conceito de pares mantido do pré-passo Toast (a11y wins). Valores 500/700
     recalibrados para casar com escala v1 quiet luxury. Matriz de contraste:
     vide R1-DELTAS.md §16. Todos os 8 foregrounds passam AA contra base e tint.

     success · olive
     warning · ochre/amber
     error/danger · terracotta
     info · steel blue */

  /* success */
  --feedback-success-on-light:    #4A6128;  /* AA 6.09:1 base · 6.09:1 tint   (v1 700) */
  --feedback-success-on-dark:     #9CC555;  /* AAA 10.53:1 base · 7.37:1 tint (400 extrapolado) */
  --feedback-success-bg-on-light: #EEF2E5;  /* tint Δ 1.00 vs bg-base light    (v1 50) */
  --feedback-success-bg-on-dark:  #1A2D14;  /* tint Δ 1.43 vs bg-base dark */

  /* warning */
  --feedback-warning-on-light:    #6B5012;  /* AA 6.63:1 base · 6.57:1 tint   (800 extrapolado) */
  --feedback-warning-on-dark:     #C9A04D;  /* AA 8.62:1 base · 5.45:1 tint   (v1 500) */
  --feedback-warning-bg-on-light: #F6EFD9;  /* tint Δ 1.01                     (v1 50) */
  --feedback-warning-bg-on-dark:  #3D2D0E;  /* tint Δ 1.58 */

  /* error/danger */
  --feedback-danger-on-light:     #7A2D1F;  /* AAA 8.30:1 base · 7.48:1 tint  (v1 700) */
  --feedback-danger-on-dark:      #D88574;  /* AA 7.53:1 base · 6.29:1 tint   (300 extrapolado) */
  --feedback-danger-bg-on-light:  #F3E1DD;  /* tint Δ 1.11                     (v1 50) */
  --feedback-danger-bg-on-dark:   #2D110A;  /* tint Δ 1.20 */

  /* info */
  --feedback-info-on-light:       #324A66;  /* AAA 8.00:1 base · 7.37:1 tint  (v1 700) */
  --feedback-info-on-dark:        #94B0CE;  /* AAA 9.36:1 base · 7.34:1 tint  (300 extrapolado) */
  --feedback-info-bg-on-light:    #E2E8EE;  /* tint Δ 1.08                     (v1 50) */
  --feedback-info-bg-on-dark:     #14202E;  /* tint Δ 1.28 */

  /* Aliases legacy (v1 single-value · consumidores em badge/product-card) */
  --success: var(--feedback-success-on-light);   /* AA 6.09:1 sobre --bg-base */
  --warning: var(--feedback-warning-on-light);   /* AA 6.63:1 sobre --bg-base */
  --danger:  var(--feedback-danger-on-light);    /* AAA 8.30:1 sobre --bg-base */
  --warning-text-on-light: var(--feedback-warning-on-light);   /* compat M4 */

  /* ─────────────────────────────────────────────────────────────────────────
     §8 · FOCUS RING
     ─────────────────────────────────────────────────────────────────────── */
  --focus-ring-color:  var(--action-primary);   /* preto sobre light · off-white sobre dark */
  --focus-ring-width:  2px;
  --focus-ring-offset: 2px;

  /* ─────────────────────────────────────────────────────────────────────────
     §9 · TIPOGRAFIA — Famílias
     ─────────────────────────────────────────────────────────────────────── */
  --font-family-display: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  --font-family-body:    'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;

  /* ─────────────────────────────────────────────────────────────────────────
     §10 · TIPOGRAFIA — Pesos
     ─────────────────────────────────────────────────────────────────────── */
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;

  /* ─────────────────────────────────────────────────────────────────────────
     §11 · TIPOGRAFIA — Escala (rem · alinhada com design-system.html)
     ─────────────────────────────────────────────────────────────────────── */
  --fs-display:  3.75rem;     /*  60px · hero display (HTML) */
  --fs-h1:       3rem;        /*  48px · título de página (v2 preserved) */
  --fs-h2:       2.25rem;     /*  36px · heading (HTML) */
  --fs-h3:       1.5rem;      /*  24px · subheading (HTML) */
  --fs-lead:     1.125rem;    /*  18px · parágrafo de abertura */
  --fs-body:     1rem;        /*  16px · corpo padrão (HTML) */
  --fs-caption:  0.8125rem;   /*  13px · label/helper-text (HTML) */
  --fs-micro:    0.75rem;     /*  12px · eyebrow (HTML §1.eyebrow) */

  /* Line-heights */
  --lh-display:  3.9rem;      /*  62.5px · 1.04 */
  --lh-h1:       3.25rem;     /*  52px */
  --lh-h2:       2.5rem;      /*  40px · 1.11 */
  --lh-h3:       1.75rem;     /*  28px · 1.16 */
  --lh-lead:     1.75rem;     /*  28px */
  --lh-body:     1.5rem;      /*  24px · 1.5 */
  --lh-caption:  1.125rem;    /*  18px */
  --lh-micro:    1rem;        /*  16px · 1.33 */

  /* Letter-spacing */
  --tracking-display:  -0.02em;   /* HTML headline */
  --tracking-h1:       -0.02em;
  --tracking-h2:       -0.02em;
  --tracking-h3:       -0.01em;
  --tracking-body:      0;
  --tracking-caption:   0.025em;  /* HTML button letter-spacing */
  --tracking-micro:     0.1em;    /* HTML table th */
  --tracking-brand:     0.2em;    /* HTML eyebrow · wordmark · brand typeset */

  /* ─────────────────────────────────────────────────────────────────────────
     §12 · ESPAÇAMENTO — escala 4px base · rem
     ─────────────────────────────────────────────────────────────────────── */
  --space-0:   0;
  --space-1:   0.25rem;    /*   4px */
  --space-2:   0.5rem;     /*   8px */
  --space-3:   0.75rem;    /*  12px */
  --space-4:   1rem;       /*  16px */
  --space-6:   1.5rem;     /*  24px */
  --space-8:   2rem;       /*  32px */
  --space-12:  3rem;       /*  48px */
  --space-16:  4rem;       /*  64px */
  --space-24:  6rem;       /*  96px */
  --space-32:  8rem;       /* 128px */
  --space-40:  10rem;      /* 160px */

  /* ─────────────────────────────────────────────────────────────────────────
     §13 · CONTAINER / GRID
     ─────────────────────────────────────────────────────────────────────── */
  --container-max:        1440px;
  --container-padding:    var(--space-8);
  --container-padding-mb: var(--space-5, 1.25rem);
  --grid-cols:            12;
  --grid-gap:             var(--space-6);
  --grid-gap-mb:          var(--space-4);
  --section-py:           var(--space-24);
  --section-py-mb:        var(--space-16);

  /* ─────────────────────────────────────────────────────────────────────────
     §14 · RAIOS (alinhados ao HTML)
     ─────────────────────────────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-xs:   2px;     /* badge (HTML) */
  --radius-sm:   4px;     /* button · input · skip-link (HTML) */
  --radius-md:   8px;     /* card · modal (HTML) */
  --radius-lg:   16px;    /* casos específicos · v2 preserved */
  --radius-full: 9999px;  /* avatar · contador circular */

  /* Aliases semânticos (consumidores R3 herdam automaticamente) */
  --radius-button: 4px;   /* HTML .btn */
  --radius-badge:  2px;   /* HTML .badge */
  --radius-modal:  8px;   /* HTML .modal */
  --radius-input:  4px;   /* HTML .input */

  /* ─────────────────────────────────────────────────────────────────────────
     §15 · SOMBRAS (uso restrito · modal e card-elevated)
     ─────────────────────────────────────────────────────────────────────── */
  --shadow-none:     none;
  --shadow-dropdown: 0 8px 24px -8px rgb(0 0 0 / 0.18),
                     0 2px 6px -2px rgb(0 0 0 / 0.10);
  --shadow-modal:    0 32px 64px -16px rgb(0 0 0 / 0.14);  /* HTML .modal */
  --shadow-card:     0 2px 6px -1px rgb(0 0 0 / 0.06),
                     0 1px 3px -1px rgb(0 0 0 / 0.04);     /* HTML .card-elevated */

  /* ─────────────────────────────────────────────────────────────────────────
     §16 · MOTION
     ─────────────────────────────────────────────────────────────────────── */
  --duration-instant:  0ms;
  --duration-fast:     150ms;     /* HTML default · hover, transitions */
  --duration-base:     200ms;     /* fadeIn modal overlay (HTML) */
  --duration-moderate: 250ms;     /* slideUp modal painel (HTML) · card hover */
  --duration-slow:     400ms;
  --duration-slower:   600ms;
  --motion-duration-shimmer: 1600ms;  /* Skeleton loop (preservado de v2) */
  --duration-marquee:  60s;

  --easing-out:        cubic-bezier(0.2, 0, 0, 1);   /* HTML — snappier */
  --easing-standard:   cubic-bezier(0.2, 0, 0, 1);   /* alinha · v1 não distingue */
  --easing-in:         cubic-bezier(0.4, 0, 1, 1);
  --motion-easing-out: var(--easing-out);            /* alias semântico */

  /* ─────────────────────────────────────────────────────────────────────────
     §17 · BREAKPOINTS (referência · media queries usam literais)
     ─────────────────────────────────────────────────────────────────────── */
  --bp-sm:   640px;
  --bp-md:   768px;
  --bp-lg:   1024px;
  --bp-xl:   1280px;
  --bp-2xl:  1536px;

  /* ─────────────────────────────────────────────────────────────────────────
     §18 · Z-INDEX
     ─────────────────────────────────────────────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  40;      /* header sticky */
  --z-drawer:  45;      /* menu mobile lateral */
  --z-overlay: 50;      /* modal backdrop */
  --z-modal:   60;      /* modal content */
  --z-popover: 70;      /* tooltips · mega-menu · dropdown */
  --z-toast:   80;      /* notificações */
  --z-top:     100;     /* skip-link */

  /* ─────────────────────────────────────────────────────────────────────────
     §19 · OPACIDADES
     ─────────────────────────────────────────────────────────────────────── */
  --opacity-disabled: 0.4;
  --opacity-muted:    0.6;
  --opacity-overlay:  0.85;
}


/* ═══════════════════════════════════════════════════════════════════════════
   DARK THEME — inverte action-primary · escala neutral invertida implicitamente
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {

  /* §1 BASE — dark */
  --bg-base:           #000000;          /* preto absoluto */
  --bg-raised:         #0F0D09;          /* cards/modal · superfície elevada */
  --bg-sunken:         #000000;          /* HTML define igual ao base · sem hierarquia 3-tier */
  --bg-inverse:        #F3F0E9;          /* off-white invertido para banners light em dark */

  --bg-dark:           var(--bg-base);
  --bg-dark-elevated:  var(--bg-raised);
  --bg-dark-muted:     #1F1C16;          /* derivado para hover · = neutral-800 */

  /* §2 TEXTO — dark */
  --fg-base:           #F3F0E9;
  --fg-muted:          #A39C87;          /* HTML neutral-400 em dark */
  --fg-subtle:         #78725E;          /* HTML neutral-500 (sub-subtle em dark) */
  --fg-on-inverse:     #000000;

  --text-on-dark:      var(--fg-base);
  --text-on-dark-mut:  var(--fg-muted);

  /* §3 BORDAS — dark */
  --border-subtle:     #1F1C16;
  --border-default:    #38342A;
  --border-strong:     #C9C3B2;

  --border-dark:       var(--border-subtle);

  /* §4 ACTION PRIMARY — dark (invertida) */
  --action-primary:        #F3F0E9;
  --action-primary-hover:  #E5E1D6;
  --action-primary-active: #C9C3B2;
  --action-on-primary:     #000000;

  /* §5 PATTERN — dark */
  --pattern-color: rgba(243, 240, 233, 0.04);

  /* §6 NEUTRAL SCALE — preservada (mesmos valores · semantic via §1-§4) */
  /* (escala neutral é tonal · não inverte entre temas · só os semânticos invertem) */
}


/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}