/* ==========================================================
   Virada Financeira — Design Tokens
   Direção: Seiva (Violeta + Laranja)
   Atualizado: 2026-04-24
   ========================================================== */

:root {
  /* ---------- Cores: Paleta ---------- */
  --color-primary:       #8B6DBD;  /* Violeta */
  --color-primary-hover: #74549F;
  --color-primary-soft:  #E0D1EE;  /* Lilás-névoa */
  --color-primary-dark:  #3E2A4E;  /* Ameixa-noite */

  --color-accent:        #EF8A33;  /* Laranja-brasa */
  --color-accent-hover:  #DB6F2A;
  --color-accent-soft:   #F4D5A8;  /* Creme-âmbar */
  --color-accent-deep:   #DD6E3A;  /* Coral — uso pontual */

  --color-bg:            #EEE3F5;  /* Lilás-leve */
  --color-surface:       #FBF7EE;  /* Leite */
  --color-ink:           #1F1A26;  /* Carvão-suave */
  --color-muted:         #A89A82;  /* Argila — decorativo (divisórias, ícones inativos) */

  /* Variantes "readable" — uso obrigatório quando o token vira TEXTO sobre fundo claro.
     Argila e laranja-brasa originais não cumprem WCAG AA como texto; estes cumprem. */
  --color-muted-strong:    #756954;  /* Argila escura — texto secundário em fundo claro (AA) */
  --color-accent-readable: #A04918;  /* Laranja-brasa profunda — texto em fundo claro (AA) */
  --color-accent-readable-hover: #7A330B;

  --color-border:        rgba(139, 109, 189, 0.18);
  --color-border-strong: rgba(139, 109, 189, 0.35);

  --color-success:       #6E8B5E;
  --color-error:         #A8453D;

  /* ---------- Tipografia ---------- */
  /* Toda hierarquia usa Contralto Small (kit xwi1oif).
     Títulos: Demibold (600). Corpo: Regular (400). Nunca Bold (700). */
  --font-display: 'contralto-small', 'Times New Roman', serif;
  --font-heading: 'contralto-small', 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Escala modular */
  --fs-display: clamp(56px, 7vw, 96px);
  --fs-h1:      clamp(40px, 5vw, 64px);
  --fs-h2:      clamp(28px, 3.5vw, 40px);
  --fs-h3:      24px;
  --fs-h4:      18px;
  --fs-body-l:  18px;
  --fs-body:    16px;
  --fs-body-s:  14px;
  --fs-label:   11px;

  /* Pesos — kit xwi1oif expõe só 400 e 600 pra contralto-small (além de 700, proibido).
     Usar apenas regular e demibold. */
  --fw-regular:  400;
  --fw-demibold: 600;

  /* ---------- Espaçamento ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- Radius ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;

  /* ---------- Container ---------- */
  --container-editorial: 1200px;
  --container-app:       1440px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
}

/* ==========================================================
   Tailwind config (para React/Vercel)
   Colar em tailwind.config.js → theme.extend
   ==========================================================
   colors: {
     primary: { DEFAULT: '#8B6DBD', hover: '#74549F', soft: '#E0D1EE', dark: '#3E2A4E' },
     accent:  { DEFAULT: '#EF8A33', hover: '#DB6F2A', soft: '#F4D5A8', deep: '#DD6E3A' },
     bg:      '#EEE3F5',
     surface: '#FBF7EE',
     ink:     '#1F1A26',
     muted:   '#A89A82',
   },
   fontFamily: {
     display: ['"contralto-small"', 'serif'],
     heading: ['"contralto-small"', 'serif'],
     body:    ['"contralto-small"', 'serif'],
     mono:    ['"JetBrains Mono"', 'monospace'],
   },
   ========================================================== */