/* ==========================================================================
   Tokens · Daniel Martins
   Paleta: Ember Noir (skill) com as cores reais da marca DM
   - laranja #DC6919 e azul #1618C2 extraídos do ícone/wordmark
   ========================================================================== */
:root {
  color-scheme: dark;

  /* Cor — 70% neutro / 20% superfície / 10% acento */
  --c-ink: #0A0A0B;
  --c-surface: #141416;
  --c-surface-2: #1D1D20;
  --c-line: rgb(255 255 255 / .08);
  --c-line-strong: rgb(255 255 255 / .16);
  --c-paper: #F4EFE8;
  --c-muted: rgb(244 239 232 / .62);        /* ~6.9:1 sobre ink */
  --c-brand: #DC6919;                        /* laranja da marca: preenchimentos (texto ink em cima = 5.7:1) */
  --c-accent: #FF7A2E;                       /* laranja para TEXTO sobre fundo escuro = 7.6:1 */
  --c-on-accent: #0A0A0B;
  --c-blue: #1618C2;                         /* azul da marca: preenchimentos (texto paper em cima = 9.4:1) */
  --c-blue-light: #8B8DFF;                   /* azul para texto sobre ink = 6.9:1 */

  /* Design system Daniel Martins: "sand" = o dourado da marca (CTAs, palavras de destaque, link ativo) */
  --c-sand-100: #f4e7d7;
  --c-sand-200: #f5e0c6;
  --c-sand-300: #eed4b4;
  --c-sand-400: #e6c9a6;
  --c-sand-500: #c3ae93;
  --gradient-cta: linear-gradient(90deg, #c3ae93 0%, #f4e7d7 45%, #f5e6c9 100%);
  --glow-sand: 0 0 0 3px rgb(238 212 180 / .35);

  /* Tipografia: Display A condensada + geométrica variável + serif itálica de acento */
  --font-display: "Anton", "Impact", "Arial Narrow Bold", sans-serif;
  --font-ui: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;   /* fonte de texto do design system */
  --font-accent: "Instrument Serif", "Times New Roman", serif;

  /* Escala fluida 1.25 → 1.333 (360 → 1680px). rem + vw preserva o zoom (WCAG 1.4.4) */
  --fs-100: clamp(0.75rem, 0.73rem + 0.08vw, 0.8125rem);
  --fs-200: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --fs-300: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-400: clamp(1.25rem, 1.13rem + 0.5vw, 1.5rem);
  --fs-500: clamp(1.5rem, 1.25rem + 1.1vw, 2.25rem);
  --fs-600: clamp(2rem, 1.5rem + 2.2vw, 3.5rem);
  --fs-700: clamp(2.5rem, 1.6rem + 4vw, 5.5rem);
  --fs-800: clamp(3.25rem, 1.8rem + 6.5vw, 8.5rem);
  --fs-giant: clamp(5rem, 1rem + 20vw, 26rem);

  /* Espaço (base 4px) */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-6: 1.5rem; --sp-8: 2rem;
  --sp-12: 3rem; --sp-16: 4rem; --sp-24: 6rem; --sp-32: 8rem;
  --gutter: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  --container: min(100% - 2 * var(--gutter), 105rem);   /* trava em 1680px no ultrawide */
  --section-y: clamp(4rem, 2rem + 8vw, 10rem);
  --nav-h: 4.5rem;

  /* Forma */
  --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --shadow-float: 0 30px 60px -20px rgb(0 0 0 / .55);
  --glass: rgb(255 255 255 / .06);
  --glass-line: rgb(255 255 255 / .12);

  /* Profundidade — nunca use z-index solto */
  --z-atmos: 0; --z-bg: 1; --z-mid: 2; --z-fg: 3;
  --z-sticky: 20; --z-grain: 39; --z-cursor: 40; --z-nav: 60; --z-menu: 70; --z-modal: 80; --z-toast: 100;

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-micro: 180ms; --dur-ui: 420ms; --dur-reveal: 900ms; --dur-page: 1100ms;
}