/* tokens.css — Tokens de design do sistema ÁUREO.
   Escalas noir/gold, gradientes, tipografia, espaçamento, raio, sombra e movimento.
   Único arquivo com :root — todos os demais consomem estas variáveis. */

:root {
  /* ---- ESCALA NOIR (preto) ---- */
  --noir-950: #040404; /* fundo da página */
  --noir-900: #0a0a0b; /* superfície elevada quase preta */
  --noir-850: #0f0f11; /* base de card / painel */
  --noir-800: #15151a; /* card elevado, preenchimento de input */
  --noir-700: #1d1d24; /* bordas finas sobre o escuro */
  --noir-600: #2a2a33; /* borda / divisor mais forte */
  --noir-500: #3a3a45; /* texto desabilitado, filete tênue */
  --noir-400: #5c5c68; /* texto de label mudo */

  /* ---- ESCALA GOLD (dourado) ---- */
  --gold-50:  #fbf3d9; /* tom dourado mais claro (brilho) */
  --gold-200: #f3e2a8; /* champanhe pálido */
  --gold-300: #e8cd84; /* dourado claro — topo do gradiente */
  --gold-400: #d4af5f; /* dourado da marca */
  --gold-500: #c9a24a; /* dourado primário (botões, acentos) */
  --gold-600: #a9842f; /* dourado antigo profundo — base do gradiente */
  --gold-700: #7d5f1f; /* sombra / dourado pressionado */
  --gold-900: #3a2c10; /* bronze escuro, preenchimentos sutis */

  /* ---- GRADIENTES DOURADOS ---- */
  --grad-gold-text: linear-gradient(180deg, var(--gold-200) 0%, var(--gold-400) 45%, var(--gold-600) 100%);
  --grad-gold-metal: linear-gradient(145deg, var(--gold-300) 0%, var(--gold-500) 38%, var(--gold-700) 72%, var(--gold-400) 100%);
  --grad-gold-pill: linear-gradient(180deg, var(--gold-300) 0%, var(--gold-500) 55%, var(--gold-600) 100%);
  --grad-gold-sheen: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.55) 48%, transparent 60%);
  --grad-panel: linear-gradient(165deg, rgba(212, 175, 95, 0.07) 0%, rgba(212, 175, 95, 0.02) 42%, rgba(255, 255, 255, 0.012) 100%);

  /* ---- CORES DE TEXTO ---- */
  --text-primary: #f4f0e6;   /* off-white quente — títulos e corpo */
  --text-secondary: #b9b3a4; /* texto de parágrafo secundário */
  --text-muted: #8a8576;     /* legendas, texto auxiliar */
  --text-faint: #5c5c68;     /* specs, desabilitado */
  --text-gold: var(--gold-400);
  --text-on-gold: #1a1408;   /* texto quase preto sobre botões dourados */

  /* ---- CORES DE BORDA ---- */
  --border-hairline: rgba(244, 240, 230, 0.07);
  --border-soft: rgba(244, 240, 230, 0.12);
  --border-gold: rgba(201, 162, 74, 0.38);
  --border-gold-strong: rgba(201, 162, 74, 0.7);
  --border-dashed: rgba(201, 162, 74, 0.28);

  /* ---- CORES DE GLOW / GLASS ---- */
  --glow-gold-soft: rgba(201, 162, 74, 0.22);
  --glow-gold-strong: rgba(212, 175, 95, 0.45);
  --glow-white: rgba(255, 255, 255, 0.18);
  --glass-tint: rgba(212, 175, 95, 0.05);
  --glass-border-top: rgba(255, 255, 255, 0.18);
  --glass-border-left: rgba(255, 255, 255, 0.12);

  /* ---- FAMÍLIAS TIPOGRÁFICAS ---- */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* ---- ESCALA TIPOGRÁFICA FLUIDA (clamp: min, vw, max) ---- */
  --fs-display-xl: clamp(3.25rem, 7.5vw, 6.5rem);  /* headline serifa do hero */
  --fs-display-lg: clamp(2.5rem, 5vw, 4.25rem);    /* título serifa de seção */
  --fs-display-md: clamp(2rem, 3.6vw, 3rem);
  --fs-h1: clamp(1.9rem, 3vw, 2.6rem);
  --fs-h2: clamp(1.5rem, 2.2vw, 2rem);
  --fs-h3: clamp(1.2rem, 1.5vw, 1.4rem);
  --fs-stat: clamp(3rem, 6vw, 5rem);               /* números de contador */
  --fs-body-lg: clamp(1.05rem, 1.3vw, 1.2rem);
  --fs-body: clamp(0.95rem, 1vw, 1.0625rem);
  --fs-body-sm: 0.875rem;
  --fs-label: 0.75rem;                             /* eyebrow mono */
  --fs-label-xs: 0.625rem;                         /* micro-spec mono */

  /* ---- SUPORTE TIPOGRÁFICO ---- */
  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;
  --tracking-display: -0.02em;
  --tracking-label: 0.22em;
  --tracking-stat: -0.05em;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- ESCALA DE ESPAÇAMENTO (base 12px) ---- */
  --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;
  --space-11: 160px;
  --section-y: clamp(4rem, 9vw, 8rem); /* ritmo entre seções do catálogo */
  --container: 1320px;
  --container-wide: 1480px;

  /* ---- ESCALA DE RAIO ---- */
  --radius-xs: 2px;   /* tags / chips */
  --radius-sm: 4px;   /* botões */
  --radius-md: 8px;   /* inputs */
  --radius-lg: 12px;  /* cards */
  --radius-xl: 20px;  /* cards grandes */
  --radius-2xl: 32px; /* painéis */
  --radius-pill: 999px;
  --radius-round: 50%;

  /* ---- SOMBRA / ELEVAÇÃO ---- */
  --shadow-e1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-e2: 0 8px 24px -8px rgba(0, 0, 0, 0.55);
  --shadow-e3: 0 20px 60px -12px rgba(0, 0, 0, 0.7);
  --shadow-panel: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 24px 70px -16px rgba(0, 0, 0, 0.75), inset 0 0 48px rgba(212, 175, 95, 0.03);
  --shadow-gold-pill: 0 10px 30px -8px rgba(201, 162, 74, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-gold-glow: 0 0 40px var(--glow-gold-soft);
  --shadow-gold-glow-lg: 0 0 60px var(--glow-gold-strong);
  --shadow-inset-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -2px 6px rgba(125, 95, 31, 0.4);
  --shadow-inset-white: inset 0 0 15px 17px rgba(255, 255, 255, 0.19); /* hover de botão */

  /* ---- DURAÇÕES DE MOVIMENTO ---- */
  --dur-fast: 160ms;
  --dur-base: 300ms;
  --dur-slow: 600ms;
  --dur-slower: 900ms;
  --dur-marquee: 38s;
  --dur-drift: 11s;
  --dur-shimmer: 3.4s;
  --dur-glow: 4s;

  /* ---- CURVAS DE MOVIMENTO ---- */
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);  /* scroll reveal + hover-lift */
  --ease-lift: cubic-bezier(0.2, 0.8, 0.2, 1);   /* elevação de icon-btn */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-soft: cubic-bezier(0.33, 1, 0.68, 1);

  /* ---- CONFIG DE REVEAL (consumida pelo JS) ---- */
  --reveal-distance: 24px;
  --reveal-stagger: 18ms;
}