/* ═══════════════════════════════════════════════════════════════
   MOVE! ENERGIA — Design Tokens
   ═══════════════════════════════════════════════════════════════

   GERADO a partir de:
     Move Design System / move-tokens-updated / outputs/css/tokens.css  (v2.0.0)
     fonte real dos valores: tokens/{primitive,semantic,component}/*.json

   Contém SÓ a camada de tokens do design system. A camada de classes
   utilitárias do arquivo original (.btn, .card, .badge, .modal, .field…)
   NÃO foi trazida: ela colide com `move-style.css` — mesmos nomes de
   classe, valores diferentes, sufixos incompatíveis (.badge-orange do DS
   vs .badge-or do repositório). Os componentes deste repositório vivem em
   `move-style.css` e `components.css` e apenas CONSOMEM os tokens daqui.

   ┌─ DESVIOS DELIBERADOS EM RELAÇÃO AO OUTPUT DO DS ───────────────┐
   │ Ao regerar a partir do DS, reaplicar os três. Cada um está     │
   │ marcado no corpo do arquivo com o mesmo prefixo [DESVIO n].    │
   │                                                                │
   │ 1. Fontes auto-hospedadas em vez de @import do Google Fonts    │
   │ 2. --color-info-* passa de laranja para azul (dark e light)    │
   │ 3. --input-font-size 15px → 16px                               │
   │ 4. --btn-primary-text passa a roxo 700                         │
   └────────────────────────────────────────────────────────────────┘
   ═══════════════════════════════════════════════════════════════ */

/* ─── [DESVIO 1] FONTES AUTO-HOSPEDADAS ───────────────────────────
   O DS original faz @import de fonts.googleapis.com. Aqui os arquivos
   são servidos do próprio domínio: elimina conexão a terceiro, o
   round-trip de CSS antes do primeiro texto renderizar, e um ponto de
   falha fora do nosso controle. Subconjunto `latin` (U+0000–00FF), que
   cobre todo o português. Outfit e Space Mono são SIL OFL 1.1 —
   redistribuição permitida.
   ─────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;          /* fonte variável — um arquivo, toda a escala */
  font-display: swap;
  src: url('fonts/outfit-variable.woff2') format('woff2-variations'),
       url('fonts/outfit-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/space-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/space-mono-700.woff2') format('woff2');
}

/* ─ Tipografia herdada ────────────────────────────────────────────
   O repositório tem TRÊS pilhas tipográficas, não uma:

     Outfit + Space Mono   → clientes, login, escritório, app, admin,
                             parceiros, marketplace, documentos legais
     Poppins               → site-cliente/index.html (institucional)
     Montserrat + Open Sans→ site-mov/index.html, site-mkt/index.html

   As duas últimas vieram de templates externos. Todas estão
   auto-hospedadas aqui para que a migração não altere a aparência de
   nenhuma página — unificar a tipografia é decisão de marca, não de
   infraestrutura, e está em aberto. Montserrat, aliás, consta do manual
   de marca; Poppins e Open Sans não.
   ─────────────────────────────────────────────────────────────────── */
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:100 900; font-display:swap; src:url('fonts/montserrat-variable.woff2') format('woff2'); }
@font-face { font-family:'Open Sans';  font-style:normal; font-weight:300 800; font-display:swap; src:url('fonts/open-sans-variable.woff2')  format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/poppins-700.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:800; font-display:swap; src:url('fonts/poppins-800.woff2') format('woff2'); }

/* ─── PRIMITIVES (internal reference — do not use directly in components) ─── */
:root {
  /* Purple scale */
  --primitive-purple-950: #0a0220;
  --primitive-purple-900: #120435;
  --primitive-purple-800: #1a0548;
  --primitive-purple-700: #200F4C;
  --primitive-purple-600: #2D0A65;
  --primitive-purple-500: #3d1282;
  --primitive-purple-400: #5a1db5;
  --primitive-purple-300: #7c44d4;
  --primitive-purple-200: #a87de8;
  --primitive-purple-100: #d4b8f5;

  /* Orange scale */
  --primitive-orange-700: #994c00;
  --primitive-orange-600: #c45e00;
  --primitive-orange-500: #FF7F00;
  --primitive-orange-400: #FF9500;
  --primitive-orange-300: #FFB347;
  --primitive-orange-200: #FFD49E;
  --primitive-orange-100: #FFF0DB;

  /* Lilac scale */
  --primitive-lilac-500: #b56dc4;
  --primitive-lilac-400: #CE87D9;
  --primitive-lilac-300: #E19ECB;
  --primitive-lilac-200: #F4B9F6;
  --primitive-lilac-100: #fce8fd;

  /* Semantic scale */
  --primitive-green-500: #22C55E;
  --primitive-green-300: #86efac;
  --primitive-red-500:   #EF4444;
  --primitive-red-300:   #fca5a5;
  --primitive-yellow-500: #F59E0B;
  --primitive-yellow-300: #fcd34d;
  --primitive-blue-500:  #3B82F6;
  --primitive-blue-300:  #93c5fd;

  /* ─── SPACING — 8pt grid ─── */
  --spacing-0:  0px;
  --spacing-1:  4px;
  --spacing-2:  8px;
  --spacing-3:  12px;
  --spacing-4:  16px;
  --spacing-5:  20px;
  --spacing-6:  24px;
  --spacing-7:  28px;
  --spacing-8:  32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-14: 56px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-32: 128px;

  /* ─── RADIUS — primitives ─── */
  --radius-none: 0px;
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   11px;   /* inputs */
  --radius-lg:   14px;
  --radius-xl:   16px;
  --radius-2xl:  22px;   /* glass cards */
  --radius-3xl:  32px;
  --radius-pill: 100px;  /* buttons, badges */
  --radius-full: 9999px;

  /* ─── RADIUS — semantic (components use these) ─── */
  --radius-control:  var(--radius-md);   /* inputs, selects — 11px */
  --radius-button:   var(--radius-pill); /* all buttons — 100px */
  --radius-badge:    var(--radius-pill); /* badges, chips — 100px */
  --radius-card:     var(--radius-2xl);  /* glass cards — 22px */
  --radius-modal:    20px;               /* modals, dialogs */
  --radius-toast:    12px;               /* toasts */
  --radius-tooltip:  var(--radius-sm);   /* tooltips — 8px */
  --radius-nav:      10px;               /* nav items */
  --radius-skeleton: var(--radius-sm);   /* skeleton loaders — 8px */

  /* ─── TYPOGRAPHY — primitives ─── */
  --font-brand:  'Outfit', sans-serif;
  --font-mono:   'Space Mono', monospace;
  --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --font-weight-light:     300;
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;
  --font-weight-black:     900;

  --font-size-10: 10px;
  --font-size-11: 11px;
  --font-size-12: 12px;
  --font-size-13: 13px;
  --font-size-14: 14px;
  --font-size-15: 15px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-22: 22px;
  --font-size-24: 24px;
  --font-size-28: 28px;
  --font-size-32: 32px;
  --font-size-36: 36px;
  --font-size-40: 40px;
  --font-size-48: 48px;

  --line-height-tight:   1.2;
  --line-height-snug:    1.35;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.65;
  --line-height-loose:   1.8;

  --letter-spacing-tight:  -0.03em;
  --letter-spacing-snug:   -0.01em;
  --letter-spacing-normal:  0em;
  --letter-spacing-wide:    0.04em;
  --letter-spacing-wider:   0.08em;
  --letter-spacing-widest:  0.15em;

  /* ─── TYPOGRAPHY — semantic scale ─── */
  --type-display-size:          var(--font-size-40);
  --type-display-weight:        var(--font-weight-extrabold);
  --type-display-line-height:   var(--line-height-tight);
  --type-display-letter-spacing:var(--letter-spacing-snug);

  --type-h1-size:               var(--font-size-32);
  --type-h1-weight:             var(--font-weight-bold);
  --type-h1-line-height:        var(--line-height-tight);
  --type-h1-letter-spacing:     var(--letter-spacing-snug);

  --type-h2-size:               var(--font-size-24);
  --type-h2-weight:             var(--font-weight-bold);
  --type-h2-line-height:        var(--line-height-snug);
  --type-h2-letter-spacing:     var(--letter-spacing-snug);

  --type-h3-size:               var(--font-size-20);
  --type-h3-weight:             var(--font-weight-semibold);
  --type-h3-line-height:        var(--line-height-snug);
  --type-h3-letter-spacing:     var(--letter-spacing-normal);

  --type-h4-size:               var(--font-size-18);
  --type-h4-weight:             var(--font-weight-semibold);
  --type-h4-line-height:        var(--line-height-snug);
  --type-h4-letter-spacing:     var(--letter-spacing-normal);

  --type-body-size:             var(--font-size-15);
  --type-body-weight:           var(--font-weight-regular);
  --type-body-line-height:      var(--line-height-normal);
  --type-body-letter-spacing:   var(--letter-spacing-normal);

  --type-body-md-size:          var(--font-size-15);
  --type-body-md-weight:        var(--font-weight-medium);
  --type-body-md-line-height:   var(--line-height-normal);

  --type-body-sm-size:          var(--font-size-13);
  --type-body-sm-weight:        var(--font-weight-regular);
  --type-body-sm-line-height:   var(--line-height-normal);

  --type-caption-size:          var(--font-size-12);
  --type-caption-weight:        var(--font-weight-regular);
  --type-caption-line-height:   var(--line-height-normal);
  --type-caption-letter-spacing:var(--letter-spacing-wide);

  --type-label-size:            var(--font-size-11);
  --type-label-weight:          var(--font-weight-semibold);
  --type-label-line-height:     var(--line-height-normal);
  --type-label-letter-spacing:  var(--letter-spacing-widest);

  --type-mono-size:             var(--font-size-13);
  --type-mono-weight:           var(--font-weight-regular);
  --type-mono-line-height:      var(--line-height-relaxed);
  --type-mono-family:           var(--font-mono);

  /* ─── MOTION ─── */
  --duration-instant:  0ms;
  --duration-fast:     100ms;
  --duration-base:     200ms;
  --duration-moderate: 300ms;
  --duration-slow:     450ms;
  --duration-slower:   700ms;

  --ease-linear:      linear;
  --ease-in:          ease-in;                              /* evitar em UI — só saída rara sem alternativa */
  --ease-out:         cubic-bezier(0.23, 1, 0.32, 1);        /* ease-out forte — padrão para entrada/hover/press */
  --ease-in-out:      cubic-bezier(0.77, 0, 0.175, 1);       /* ease-in-out forte — elemento se movendo na tela */
  --ease-drawer:      cubic-bezier(0.32, 0.72, 0, 1);        /* curva de drawer estilo iOS */
  --ease-spring:      cubic-bezier(0.34, 1.4,  0.64, 1);
  --ease-spring-soft: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─── BLUR ─── */
  --blur-sm:  8px;
  --blur-md:  16px;
  --blur-lg:  22px;
  --blur-xl:  40px;
  --blur-2xl: 88px;

  /* ─── Z-INDEX — primitives ─── */
  --z-base:    0;
  --z-raised:  1;
  --z-overlay: 100;
  --z-drawer:  150;
  --z-modal:   200;
  --z-toast:   999;

  /* ─── Z-INDEX — semantic ─── */
  --z-sticky:  10;
  /* --z-base, --z-raised, --z-overlay, --z-drawer, --z-modal, --z-toast already defined above */

  /* ─── LAYOUT & GRID ─── */
  --container-max:      1280px;
  --content-max:        800px;
  --sidebar-width:      260px;
  --sidebar-collapsed:  64px;
  --navbar-height:      64px;
  --navbar-height-mob:  56px;

  --grid-columns:       12;
  --grid-gutter:        24px;
  --grid-margin:        24px;
  --grid-margin-mob:    16px;

  /* ─── BREAKPOINTS (use in @media queries) ─── */
  --bp-xs:  375px;
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;
}


/* ================================================================
   DARK MODE (default — brand identity)
   ================================================================ */
:root,
[data-theme="dark"] {

  /* — Background & Surface — */
  --color-bg:           #120435;
  --color-surface-1:    #1a0548;
  --color-surface-2:    #200F4C;
  --color-surface-3:    #2D0A65;
  --color-surface-4:    #3d1282;
  --color-overlay:      rgba(0, 0, 0, 0.72);
  --color-glass:        rgba(255, 255, 255, 0.05);

  /* — Border — */
  --color-border-subtle:  rgba(255, 255, 255, 0.07);
  --color-border:         rgba(255, 255, 255, 0.13);
  --color-border-strong:  rgba(255, 255, 255, 0.20);

  /* — Text — */
  --color-text-primary:   #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.68);
  --color-text-tertiary:  rgba(255, 255, 255, 0.38);
  --color-text-disabled:  rgba(255, 255, 255, 0.20);
  --color-text-inverse:   #120435;
  --color-text-link:      #FF9500;

  /* — Brand — */
  --color-brand:          #FF7F00;
  --color-brand-light:    #FF9500;
  --color-brand-dark:     #c45e00;
  --color-brand-glow:     rgba(255, 127, 0, 0.26);
  --color-brand-ring:     rgba(255, 127, 0, 0.14);
  --color-brand-secondary: #CE87D9;
  --color-brand-tertiary:  #E19ECB;
  --color-brand-soft:      #F4B9F6;

  /* — Fill aliases — */
  --color-fill-subtle:             rgba(255, 255, 255, 0.07);
  --color-fill-ghost:              rgba(255, 255, 255, 0.09);
  --color-fill-moderate:           rgba(255, 255, 255, 0.13);
  --color-fill-strong:             rgba(255, 255, 255, 0.20);
  --color-fill-input-border:       rgba(255, 255, 255, 0.14);
  --color-fill-input-focus:        rgba(255, 255, 255, 0.11);
  --color-fill-input-hover-border: rgba(255, 255, 255, 0.22);
  --color-fill-brand-subtle:       rgba(255, 127, 0, 0.09);
  --color-fill-brand-ghost:        rgba(255, 127, 0, 0.14);
  --color-fill-brand-moderate:     rgba(255, 127, 0, 0.18);
  --color-fill-brand-strong:       rgba(255, 127, 0, 0.26);
  --color-fill-brand-emphasis:     rgba(255, 127, 0, 0.32);
  --color-fill-accent-subtle:      rgba(206, 135, 217, 0.16);
  --color-fill-accent-strong:      rgba(206, 135, 217, 0.26);

  /* — Interactive states — */
  --color-focus-ring:              #FF7F00;
  --color-hover-overlay:           rgba(255, 255, 255, 0.07);

  --color-interactive-default-bg:     rgba(255, 255, 255, 0.09);
  --color-interactive-default-border: rgba(255, 255, 255, 0.13);
  --color-interactive-default-text:   rgba(255, 255, 255, 0.68);

  --color-interactive-hover-bg:       rgba(255, 255, 255, 0.13);
  --color-interactive-hover-border:   rgba(255, 255, 255, 0.20);
  --color-interactive-hover-text:     #ffffff;
  --color-interactive-hover-overlay:  rgba(255, 255, 255, 0.07);

  --color-interactive-focus-bg:       rgba(255, 255, 255, 0.09);
  --color-interactive-focus-border:   #FF7F00;
  --color-interactive-focus-ring:     rgba(255, 127, 0, 0.14);

  --color-interactive-active-bg:      rgba(255, 127, 0, 0.14);
  --color-interactive-active-border:  #FF7F00;
  --color-interactive-active-text:    #FF7F00;

  --color-interactive-disabled-bg:    rgba(255, 255, 255, 0.05);
  --color-interactive-disabled-border:rgba(255, 255, 255, 0.07);
  --color-interactive-disabled-text:  rgba(255, 255, 255, 0.20);
  --color-interactive-disabled-opacity: 0.38;

  /* — State: Success — */
  --color-success-bg:     rgba(34, 197, 94, 0.14);
  --color-success-border: rgba(34, 197, 94, 0.32);
  --color-success-text:   #86efac;
  --color-success-icon:   #22C55E;

  /* — State: Error — */
  --color-error-bg:       rgba(239, 68, 68, 0.14);
  --color-error-border:   rgba(239, 68, 68, 0.32);
  --color-error-text:     #fca5a5;
  --color-error-icon:     #EF4444;

  /* — State: Warning — */
  --color-warning-bg:     rgba(245, 158, 11, 0.14);
  --color-warning-border: rgba(245, 158, 11, 0.32);
  --color-warning-text:   #fcd34d;
  --color-warning-icon:   #F59E0B;

  /* — State: Info — [DESVIO 2] azul, não laranja —
     No DS original `info` era laranja, indistinguível da marca: a mesma
     cor não pode significar "clique aqui" e "informação neutra" ao mesmo
     tempo. Passa a azul, seguindo o mesmo padrão bg/border/text/icon de
     success, error e warning, com os primitivos blue que já existiam no
     DS e que ninguém consumia. */
  --color-info-bg:        rgba(59, 130, 246, 0.14);
  --color-info-border:    rgba(59, 130, 246, 0.32);
  --color-info-text:      #93c5fd;
  --color-info-icon:      #3B82F6;

  /* — Skeleton — */
  --color-skeleton-base:    #200F4C;
  --color-skeleton-shimmer: #3d1282;

  /* — Elevation — */
  --elevation-ambient-color:   rgba(0, 0, 0, 0.60);
  --elevation-ambient-opacity: 0.60;
  --elevation-dir-color:       rgba(0, 0, 0, 0.40);
  --elevation-dir-opacity:     0.40;
  --elevation-overlay-blur:    var(--blur-md);
  --elevation-glass-blur:      var(--blur-lg);
  --elevation-glass-opacity:   0.05;

  --elevation-1: 0 1px 2px rgba(0,0,0,0.40), 0 1px 6px rgba(0,0,0,0.24);
  --elevation-2: 0 4px 8px rgba(0,0,0,0.40), 0 2px 20px rgba(0,0,0,0.28);
  --elevation-3: 0 8px 24px rgba(0,0,0,0.48), 0 4px 40px rgba(0,0,0,0.32);
  --elevation-4: 0 16px 48px rgba(0,0,0,0.56), 0 8px 64px rgba(0,0,0,0.36);

  --elevation-brand-sm: 0 4px 16px rgba(255,127,0,0.26);
  --elevation-brand-md: 0 8px 32px rgba(255,127,0,0.26);
  --elevation-brand-lg: 0 12px 48px rgba(255,127,0,0.26);
}


/* ================================================================
   LIGHT MODE
   ================================================================ */
[data-theme="light"] {

  /* — Background & Surface — */
  --color-bg:           #f7f4ff;
  --color-surface-1:    #ffffff;
  --color-surface-2:    #f0ebff;
  --color-surface-3:    #e4dbff;
  --color-surface-4:    #d4c8ff;
  --color-overlay:      rgba(18, 4, 53, 0.6);
  --color-glass:        rgba(255, 255, 255, 0.75);

  /* — Border — */
  --color-border-subtle: rgba(45, 10, 101, 0.10);
  --color-border:        rgba(45, 10, 101, 0.18);
  --color-border-strong: rgba(45, 10, 101, 0.30);

  /* — Text — */
  --color-text-primary:   #200F4C;
  --color-text-secondary: #2D0A65;
  --color-text-tertiary:  rgba(45, 10, 101, 0.45);
  --color-text-disabled:  rgba(45, 10, 101, 0.25);
  --color-text-inverse:   #ffffff;
  --color-text-link:      #c45e00;

  /* — Brand — */
  --color-brand:          #FF7F00;
  --color-brand-light:    #FF9500;
  --color-brand-dark:     #c45e00;
  --color-brand-glow:     rgba(255, 127, 0, 0.22);
  --color-brand-ring:     rgba(255, 127, 0, 0.20);
  --color-brand-secondary: #b56dc4;
  --color-brand-tertiary:  #CE87D9;
  --color-brand-soft:      #F4B9F6;

  /* — Fill aliases — */
  --color-fill-subtle:             rgba(45, 10, 101, 0.04);
  --color-fill-ghost:              rgba(45, 10, 101, 0.06);
  --color-fill-moderate:           rgba(45, 10, 101, 0.10);
  --color-fill-strong:             rgba(45, 10, 101, 0.16);
  --color-fill-input-border:       rgba(45, 10, 101, 0.18);
  --color-fill-input-focus:        rgba(255, 255, 255, 1.0);
  --color-fill-input-hover-border: rgba(45, 10, 101, 0.28);
  --color-fill-brand-subtle:       rgba(255, 127, 0, 0.06);
  --color-fill-brand-ghost:        rgba(255, 127, 0, 0.10);
  --color-fill-brand-moderate:     rgba(255, 127, 0, 0.14);
  --color-fill-brand-strong:       rgba(255, 127, 0, 0.20);
  --color-fill-brand-emphasis:     rgba(255, 127, 0, 0.26);
  --color-fill-accent-subtle:      rgba(181, 109, 196, 0.10);
  --color-fill-accent-strong:      rgba(181, 109, 196, 0.18);

  /* — Interactive states — */
  --color-focus-ring:              #FF7F00;
  --color-hover-overlay:           rgba(45, 10, 101, 0.06);

  --color-interactive-default-bg:     rgba(45, 10, 101, 0.06);
  --color-interactive-default-border: rgba(45, 10, 101, 0.18);
  --color-interactive-default-text:   #2D0A65;

  --color-interactive-hover-bg:       rgba(45, 10, 101, 0.10);
  --color-interactive-hover-border:   rgba(45, 10, 101, 0.30);
  --color-interactive-hover-text:     #200F4C;
  --color-interactive-hover-overlay:  rgba(45, 10, 101, 0.04);

  --color-interactive-focus-bg:       rgba(255, 255, 255, 1.0);
  --color-interactive-focus-border:   #FF7F00;
  --color-interactive-focus-ring:     rgba(255, 127, 0, 0.20);

  --color-interactive-active-bg:      rgba(255, 127, 0, 0.10);
  --color-interactive-active-border:  #FF7F00;
  --color-interactive-active-text:    #c45e00;

  --color-interactive-disabled-bg:    rgba(45, 10, 101, 0.04);
  --color-interactive-disabled-border:rgba(45, 10, 101, 0.10);
  --color-interactive-disabled-text:  rgba(45, 10, 101, 0.25);
  --color-interactive-disabled-opacity: 0.38;

  /* — State: Success — */
  --color-success-bg:     #dcfce7;
  --color-success-border: #22C55E;
  --color-success-text:   #15803d;
  --color-success-icon:   #16a34a;

  /* — State: Error — */
  --color-error-bg:       #fee2e2;
  --color-error-border:   #EF4444;
  --color-error-text:     #b91c1c;
  --color-error-icon:     #dc2626;

  /* — State: Warning — */
  --color-warning-bg:     #fef3c7;
  --color-warning-border: #F59E0B;
  --color-warning-text:   #d97706;
  --color-warning-icon:   #F59E0B;

  /* — State: Info — [DESVIO 2] azul, não laranja (mesmo motivo do dark) */
  --color-info-bg:        #dbeafe;
  --color-info-border:    #3B82F6;
  --color-info-text:      #1d4ed8;
  --color-info-icon:      #3B82F6;

  /* — Skeleton — */
  --color-skeleton-base:    #d4b8f5;
  --color-skeleton-shimmer: #a87de8;

  /* — Elevation (warm purple shadows) — */
  --elevation-ambient-color:   rgba(45, 10, 101, 0.12);
  --elevation-ambient-opacity: 0.12;
  --elevation-dir-color:       rgba(45, 10, 101, 0.08);
  --elevation-dir-opacity:     0.08;
  --elevation-overlay-blur:    var(--blur-md);
  --elevation-glass-blur:      var(--blur-lg);
  --elevation-glass-opacity:   0.75;

  --elevation-1: 0 1px 3px rgba(45,10,101,0.12), 0 1px 6px rgba(45,10,101,0.06);
  --elevation-2: 0 4px 12px rgba(45,10,101,0.12), 0 2px 24px rgba(45,10,101,0.08);
  --elevation-3: 0 8px 24px rgba(45,10,101,0.16), 0 4px 40px rgba(45,10,101,0.10);
  --elevation-4: 0 16px 48px rgba(45,10,101,0.20), 0 8px 64px rgba(45,10,101,0.12);

  --elevation-brand-sm: 0 4px 16px rgba(255,127,0,0.22);
  --elevation-brand-md: 0 8px 32px rgba(255,127,0,0.22);
  --elevation-brand-lg: 0 12px 48px rgba(255,127,0,0.22);
}


/* ================================================================
   COMPONENT TOKENS
   ================================================================ */
:root {

  /* ── Button ── */
  --btn-primary-bg:             var(--color-brand);
  /* [DESVIO 4] texto do primário = roxo 700 sobre laranja sólido.
     O DS usava --color-text-inverse sobre um gradiente #FF7F00→#c45e00.
     Medido: roxo 700 sobre #FF7F00 dá 6.7:1 (passa AA), mas sobre o
     #c45e00 do fim do gradiente cai para 4.0:1 — reprova AA para texto
     normal (o botão é 15px/600, exige 4.5:1). O gradiente saiu; quem dá
     volume ao botão é --elevation-brand-*, não ele. --btn-primary-bg-end
     fica declarado por paridade com o DS, mas nenhum componente o usa. */
  --btn-primary-text:           var(--primitive-purple-700);
  --btn-primary-bg-end:         var(--color-brand-dark);
  --btn-primary-shadow:         var(--color-brand-glow);
  --btn-ghost-bg:               var(--color-interactive-default-bg);
  --btn-ghost-border:           var(--color-interactive-default-border);
  --btn-ghost-text:             var(--color-interactive-default-text);
  --btn-ghost-hover-bg:         var(--color-interactive-hover-bg);
  --btn-ghost-hover-text:       var(--color-interactive-hover-text);
  --btn-danger-bg:              var(--color-error-bg);
  --btn-danger-border:          var(--color-error-border);
  --btn-danger-text:            var(--color-error-text);
  --btn-radius:                 var(--radius-button);
  --btn-disabled-opacity:       0.38;
  --btn-loading-spinner-size:   17px;
  --btn-height-sm:              32px;
  --btn-height-md:              44px;
  --btn-height-lg:              52px;
  --btn-padding-x-sm:           16px;
  --btn-padding-x-md:           22px;
  --btn-padding-x-lg:           28px;

  /* ── Input ── */
  --input-bg:                   var(--color-fill-ghost);
  --input-border:               var(--color-fill-input-border);
  --input-height:               48px;
  /* [DESVIO 3] 16px, não 15px. Abaixo de 16px o Safari no iOS dá zoom ao
     focar o campo e não desfaz — o layout fica torto pelo resto da sessão.
     Vale só para campo de texto de formulário; os controles compactos da
     barra de filtros continuam em --filter-font-size (13px), porque
     <select> não dispara o zoom. */
  --input-font-size:            16px;
  --input-radius:               var(--radius-control);
  --input-hover-bg:             var(--color-interactive-hover-bg);
  --input-hover-border:         var(--color-fill-input-hover-border);
  --input-focus-bg:             var(--color-fill-input-focus);
  --input-focus-border:         var(--color-interactive-focus-border);
  --input-focus-shadow:         0 0 0 3px var(--color-interactive-focus-ring);
  --input-error-border:         var(--color-error-icon);
  --input-success-border:       var(--color-success-border);
  --input-disabled-opacity:     0.38;

  /* ── Badge ── */
  --badge-radius:               var(--radius-badge);
  --badge-font-size:            11px;
  --badge-font-weight:          700;
  --badge-padding-x:            10px;
  --badge-padding-y:            3px;

  /* ── Card ── */
  --card-bg:                    var(--color-glass);
  --card-border:                var(--color-border);
  --card-radius:                var(--radius-card);
  --card-blur:                  var(--elevation-glass-blur);
  --card-padding:               var(--spacing-5);

  /* ── Stepper ── */
  --stepper-node-size:          34px;
  --stepper-line-height:        2px;

  /* ── Modal ── */
  --modal-bg:                   var(--color-surface-2);
  --modal-border:               var(--color-border);
  --modal-radius:               var(--radius-modal);
  --modal-max-width-sm:         360px;
  --modal-max-width-md:         520px;
  --modal-max-width-lg:         720px;

  /* ── Toast ── */
  --toast-radius:               var(--radius-toast);
  --toast-max-width:            300px;
  --toast-font-size:            13px;
  --toast-font-weight:          500;

  /* ── Nav ── */
  --nav-item-font-size:         13px;
  --nav-item-font-weight:       600;
  --nav-item-radius:            var(--radius-nav);
  --nav-active-bg:              var(--color-fill-brand-ghost);
  --nav-active-border:          var(--color-fill-brand-moderate);
  --nav-active-text:            var(--color-brand);

  /* ── Skeleton ── */
  --skeleton-radius:            var(--radius-skeleton);
  --skeleton-duration:          1.4s;
}


/* ================================================================
   COMPONENT TOKENS — componentes que não existem no DS
   ================================================================
   Os sete componentes de `components.css` (tabela com paginação, estado
   vazio, estado de erro, área de upload, diálogo de confirmação, campo e
   barra de filtros) não têm contrapartida em `tokens/component/
   components.json`. Os tokens abaixo seguem a mesma convenção do DS —
   referenciam SÓ semânticos, nunca primitivos — para que, quando o DS
   ganhar esses componentes, seja um de-para e não uma reescrita.
   ================================================================ */
:root {

  /* ── Table ── */
  --table-radius:               var(--radius-xl);
  --table-bg:                   var(--color-fill-subtle);
  --table-border:               var(--color-border-subtle);
  --table-font-size:            var(--font-size-13);
  --table-cell-padding-y:       var(--spacing-3);
  --table-cell-padding-x:       var(--spacing-4);
  --table-head-font-size:       var(--font-size-11);
  --table-row-hover-bg:         var(--color-hover-overlay);
  --table-row-selected-bg:      var(--color-fill-brand-subtle);
  --table-row-selected-border:  var(--color-brand);
  --table-min-width:            480px;

  /* ── Pagination ── */
  --pag-btn-size:               32px;
  --pag-font-size:              var(--font-size-13);
  --pag-radius:                 var(--radius-sm);
  --pag-active-bg:              var(--color-fill-brand-ghost);
  --pag-active-border:          var(--color-fill-brand-moderate);
  --pag-active-text:            var(--color-brand);

  /* ── Empty / Error state ── */
  --state-padding:              var(--spacing-8) var(--spacing-5);
  --state-padding-compact:      var(--spacing-5) var(--spacing-4);
  --state-icon-size:            38px;
  --state-title-size:           var(--font-size-15);
  --state-text-size:            var(--font-size-13);
  --state-max-width:            340px;

  /* ── Drop zone ── */
  --dz-radius:                  var(--radius-lg);
  --dz-border-idle:             var(--color-fill-brand-moderate);
  --dz-border-active:           var(--color-brand);
  --dz-bg-idle:                 var(--color-fill-brand-subtle);
  --dz-bg-active:               var(--color-fill-brand-ghost);
  --dz-padding:                 var(--spacing-6) var(--spacing-4);
  --dz-icon-size:               28px;

  /* ── Confirm dialog ── */
  --confirm-max-width:          var(--modal-max-width-sm);
  --confirm-icon-size:          44px;
  --confirm-gap:                var(--spacing-4);

  /* ── Filter bar ──
     13px de propósito: densidade. Ver [DESVIO 3] — a regra dos 16px
     existe contra o zoom do iOS, que <select> e busca compacta não
     disparam. */
  --filter-gap:                 var(--spacing-2);
  --filter-font-size:           var(--font-size-13);
  --filter-height:              36px;
  --filter-radius:              var(--radius-pill);
  --filter-bg:                  var(--color-fill-subtle);
  --filter-border:              var(--color-border);
  --chip-bg:                    var(--color-fill-brand-ghost);
  --chip-border:                var(--color-fill-brand-moderate);
  --chip-text:                  var(--color-brand);
}