/* ══════════════════════════════════════════════════════════════
   CRYSTAL — TOKENS DE DESIGN
   Variáveis globais do sistema de design.
   Edite aqui para propagar mudanças em todo o projeto.
   ══════════════════════════════════════════════════════════════ */

:root {

  /* ─── Paleta ─────────────────────────────────────────────────
     60 · 30 · 10: creme quente dominante, superfície clara,
     acento dourado-terra como identidade.
  ─────────────────────────────────────────────────────────── */

  /* 60% — Fundos (creme quente) */
  --c-bg:        #F4F0E8;
  --c-bg-warm:   #EFE9DD;
  --c-bg-deeper: #E8E0D0;

  /* 30% — Superfícies (branco quente, para cards) */
  --c-surface:   #FFFBF3;
  --c-surface-2: #FAF6EE;

  /* Texto */
  --c-ink:   #1A1614; /* Principal */
  --c-ink-2: #3A3128; /* Secundário */
  --c-ink-3: #5C5246; /* Terciário / legendas */
  --c-ink-4: #6B5F4D; /* Quaternário */

  /* 10% — Acento (identidade Crystal) */
  --c-accent:       #7A6B52;
  --c-accent-lt:    #D4C4A0;
  --c-accent-muted: #A89B82;
  --c-accent-bdr:   #B5A78A;
  --c-accent-bg:    #C9BFA8;

  /* Fundos escuros — seções de impacto */
  --c-dark:   #0E1418;
  --c-dark-2: #1A1614;

  /* Bordas em fundos claros */
  --c-border:    rgba(26, 22, 20, 0.08);
  --c-border-sm: rgba(26, 22, 20, 0.06);
  --c-border-lg: rgba(26, 22, 20, 0.12);

  /* Bordas em fundos escuros */
  --c-border-dk:    rgba(250, 246, 238, 0.10);
  --c-border-dk-sm: rgba(250, 246, 238, 0.06);


  /* ─── Tipografia ─────────────────────────────────────────────
     Geist: racional e moderno — estrutura.
     Instrument Serif: emoção e ênfase — em itálico pontual.
     Geist Mono: métricas, rótulos e detalhes editoriais.
  ─────────────────────────────────────────────────────────── */
  --font-sans:  'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-mono:  'Geist Mono', 'SF Mono', ui-monospace, monospace;

  /* Escala de tamanhos tipográficos */
  --text-xs:   10.5px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   19px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  36px;
  --text-5xl:  52px;
  --text-6xl:  56px;
  --text-7xl:  64px;
  --text-8xl:  72px;
  --text-hero: 84px;


  /* ─── Larguras de conteúdo ───────────────────────────────────
     Princípio: eixo central, bordas como descompressão.
     Texto corpo nunca ultrapassa --w-narrow (~620px).
  ─────────────────────────────────────────────────────────── */
  --w-narrow:  620px;  /* Máximo para parágrafos */
  --w-reading: 760px;  /* Leitura confortável */
  --w-content: 880px;  /* Conteúdo padrão (cards, intro) */
  --w-wide:    1080px; /* Grade larga (2–4 colunas) */
  --w-layout:  1180px; /* Layout máximo da página */
  --w-hero:    980px;  /* Coluna do hero */


  /* ─── Espaçamento ────────────────────────────────────────────
     Escala proporcional para cadência e harmonia visual.
  ─────────────────────────────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  28px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-14: 56px;
  --s-16: 64px;
  --s-18: 72px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;
  --s-40: 160px;
  --s-44: 176px;
  --s-48: 192px;


  /* ─── Raios de borda ─────────────────────────────────────── */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   18px;
  --r-xl:   20px;
  --r-2xl:  24px;
  --r-full: 999px;


  /* ─── Sombras ────────────────────────────────────────────── */
  --shadow-sm:   0 1px 2px rgba(26,22,20,0.04), 0 4px 12px rgba(26,22,20,0.04);
  --shadow-md:   0 1px 2px rgba(26,22,20,0.04), 0 12px 28px rgba(26,22,20,0.06);
  --shadow-lg:   0 1px 2px rgba(26,22,20,0.04), 0 24px 60px rgba(26,22,20,0.10);
  --shadow-xl:   0 1px 2px rgba(26,22,20,0.04), 0 48px 120px rgba(26,22,20,0.12);
  --shadow-dk-md: 0 1px 2px rgba(0,0,0,0.15), 0 12px 32px rgba(0,0,0,0.25);
  --shadow-dk-lg: 0 1px 2px rgba(0,0,0,0.15), 0 24px 60px rgba(0,0,0,0.30);


  /* ─── Sistema de Movimento ───────────────────────────────────
     Vocabulário ÚNICO de tempo e easing. Toda animação do site usa
     estes tokens — é o que faz "múltiplas animações" soarem como um
     só organismo (coesão). Regra: não criar curvas/durações fora daqui.

     Curvas:
       --ease-out     entradas e revelações (expo-out: rápido → suave)
       --ease-in-out  estados que vão e voltam (hover, toggle)
     Durações (escala de cadência):
       --t-fast       micro-interações, hovers              (180ms)
       --t-base       mudanças de estado                    (350ms)
       --t-slow       revelações secundárias                (650ms)
       --t-reveal     revelação padrão de entrada           (700ms)
       --t-signature  momentos de assinatura — os 10%       (900ms)
     Sequência (atraso escalonado entre itens em série):
       --stagger      ritmo padrão                          (80ms)
       --stagger-slow ritmo dramático (palavra-a-palavra)   (150ms)
  ─────────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);

  --t-fast:      180ms;
  --t-base:      350ms;
  --t-slow:      650ms;
  --t-reveal:    700ms;
  --t-signature: 900ms;

  --stagger:      80ms;
  --stagger-slow: 220ms;
}