/* tokens.css — Design tokens */
:root {
  /* ─── Cores — Oryzo warm dark ──────────────────────── */
  /* Site dark warm: bg quase-preto-marrom, texto creme, accent dourado */
  --cor-fundo:         #100904;   /* main bg — quase preto com tom marrom */
  --cor-fundo-escuro:  #080503;   /* mais escuro */
  --cor-fundo-card:    #382416;   /* superfícies / cards */
  --cor-madeira:       #6c5f51;   /* madeira média / cinza acastanhado */
  --cor-madeira-esc:   #5c4a35;
  --cor-dourado:       #c9943a;   /* accent principal — dourado âmbar */
  --cor-dourado-claro: #e8b055;   /* hover / highlight */
  --cor-dourado-brilho:#f6d27a;
  --cor-texto:         #ffedd7;   /* texto principal — creme/marfim */
  --cor-texto-suave:   #c4aa8a;   /* texto secundário */
  --cor-linha:         rgba(255, 237, 215, 0.08);
  --cor-branco:        #ffedd7;
  --cor-erro:          #dc5000;
  --cor-sucesso:       #5d6c49;
  --cor-whatsapp:      #25D366;

  /* Gradientes */
  --grad-dourado: linear-gradient(135deg, var(--cor-dourado-brilho) 0%, var(--cor-dourado) 100%);
  --grad-madeira: linear-gradient(180deg, var(--cor-fundo) 0%, var(--cor-fundo-card) 100%);
  --grad-escuro:  linear-gradient(180deg, rgba(8,5,3,0) 0%, rgba(8,5,3,0.92) 100%);

  /* ─── Tipografia ────────────────────────────────────── */
  --ff-display: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --ff-body:    'DM Sans', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --ff-mono:    'JetBrains Mono', 'SF Mono', 'Courier New', monospace;

  /* Escala modular 1.250 — Major Third (base 16px) */
  --fs-1: 0.64rem;    /* 10px  */
  --fs-2: 0.8rem;     /* 13px  */
  --fs-3: 1rem;       /* 16px  */
  --fs-4: 1.25rem;    /* 20px  */
  --fs-5: 1.563rem;   /* 25px  */
  --fs-6: 1.953rem;   /* 31px  */
  --fs-7: 2.441rem;   /* 39px  */
  --fs-8: 3.052rem;   /* 49px  */
  --fs-hero: clamp(2.8rem, 7vw, 5.8rem);

  --lh-display: 1.15;
  --lh-heading: 1.25;
  --lh-body:    1.65;
  --ls-display:    -0.02em;
  --ls-kicker:      0.1em;
  --ls-nav:         0.06em;
  --ls-caps-loose:  0.18em;
  --ls-caps-tight:  0.06em;

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

  /* ─── Grid ──────────────────────────────────────────── */
  --max-width:   1440px;
  --grid-gutter: 24px;
  --container:   min(var(--max-width), 100% - var(--grid-gutter) * 2);

  /* ─── Sombras ───────────────────────────────────────── */
  --shadow-sm: 0 2px 8px   rgba(28,23,19,0.08);
  --shadow-md: 0 8px 32px  rgba(28,23,19,0.12);
  --shadow-lg: 0 40px 80px -30px rgba(28,23,19,0.25);
  --shadow-xl: 0 60px 120px -40px rgba(28,23,19,0.30);

  /* ─── Border radius ─────────────────────────────────── */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-full: 9999px;

  /* ─── Transições ────────────────────────────────────── */
  --ease:            cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-luxury:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap:       cubic-bezier(0.7, 0, 0.3, 1);
  --t-fast:   200ms var(--ease);
  --t:        400ms var(--ease);
  --t-slow:   700ms var(--ease);

  /* ─── Z-index ───────────────────────────────────────── */
  --z-base:    1;
  --z-above:   10;
  --z-nav:     100;
  --z-header:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-cursor:  9999;

  /* ─── Header ────────────────────────────────────────── */
  --header-h: 88px;
  --header-h-mob: 64px;

  /* ── Luz Design System — Efeitos Visuais ──────────────── */
  --luz-gold:       #c9943a;
  --luz-gold-light: #e8b055;
  --luz-gold-glow:  rgba(201, 148, 58, 0.32);
  --luz-dark:       #100904;
  --luz-surface:    #382416;

  /* Easing extras */
  --ease-smooth:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out:  cubic-bezier(0.76, 0, 0.24, 1);

  /* Light streak */
  --grad-light-streak: linear-gradient(
    110deg,
    var(--cor-texto) 0%, var(--cor-texto) 35%,
    var(--cor-dourado-claro) 50%,
    var(--cor-texto) 65%, var(--cor-texto) 100%
  );

  /* Atmosphere grid */
  --grid-line-color:       rgba(255,237,215,0.04);
  --grid-line-color-light: rgba(255,237,215,0.04);
}

@media (max-width: 768px) {
  :root {
    --grid-gutter: 16px;
    --sp-9:  64px;
    --sp-10: 80px;
    --sp-12: 100px;
  }
}