/* ==========================================================================
   Mozzai — Design tokens
   Fonte: specs/design.md + specs/plano.md §3
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---------- Base (fundos e superfícies) ---------- */
  --bg: #09070a;
  --bg-elevated: #110d0c;
  --surface: #17110f;
  --surface-glass: rgba(255, 140, 60, 0.04);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --border-glow: rgba(255, 122, 36, 0.35);

  /* ---------- Laranja (marca) ---------- */
  --orange-300: #ffb27a;
  --orange-400: #ff8a3d;
  --orange-500: #ff6b1a;
  --orange-700: #c2410c;
  --ember-600: #e2401c;

  /* ---------- Secundárias ---------- */
  --amber-200: #ffd9b8;
  --success: #3ddc97;

  /* ---------- Texto ---------- */
  --text: #f5f1ec;          /* ≈ 17:1 sobre --bg */
  --text-muted: #a8a09a;    /* ≈ 7.8:1 */
  --text-subtle: #6e6660;   /* ≈ 3.6:1 — só texto grande/decorativo */
  --on-orange: #120a06;     /* ≈ 6.8:1 sobre --orange-500 */

  /* ---------- Gradientes ---------- */
  --grad-brand: linear-gradient(135deg, #ffb27a 0%, #ff6b1a 45%, #c2410c 100%);
  --line: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  --line-v: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.12), transparent);

  /* ---------- Sombras e brilhos ---------- */
  --glow-sm: 0 0 24px rgba(255, 107, 26, 0.25);
  --glow-btn: 0 0 0 1px rgba(255, 138, 61, 0.4), 0 8px 32px -6px rgba(255, 107, 26, 0.55);
  --glow-btn-hover: 0 0 0 1px rgba(255, 178, 122, 0.6), 0 12px 44px -6px rgba(255, 107, 26, 0.75);
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 64px -32px rgba(0, 0, 0, 0.8);

  /* ---------- Tipografia ---------- */
  --font-sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  --fs-display: clamp(2.25rem, 1.3rem + 4.4vw, 4.5rem);    /* 37 → 72 */
  --fs-h2: clamp(2rem, 1.45rem + 2.3vw, 3rem);             /* 32 → 48 */
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);         /* 20 → 24 */
  --fs-quote: clamp(1.375rem, 1.05rem + 1.3vw, 1.875rem);  /* 22 → 30 */
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);     /* 17 → 18 */
  --fs-body: 1rem;                                         /* 16 */
  --fs-small: 0.8125rem;                                   /* 13 */
  --fs-wordmark: clamp(6rem, 24vw, 22rem);

  /* ---------- Espaço (base 4px) ---------- */
  --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-py: clamp(5rem, 3rem + 8vw, 10rem);            /* 80 → 160 */

  /* ---------- Layout ---------- */
  --container: 1200px;
  --container-wide: 1360px;
  --container-narrow: 720px;
  --gutter: 16px;
  --header-h: 64px;

  /* ---------- Raios ---------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* ---------- Movimento ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* ≈ expo.out */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 200ms;
  --dur-short: 400ms;
  --dur-base: 800ms;
  --dur-long: 1200ms;

  /* ---------- Camadas ---------- */
  --z-content: 1;
  --z-float: 40;
  --z-menu: 45;
  --z-header: 50;
  --z-grain: 100;
}

@media (min-width: 768px) {
  :root {
    --gutter: 24px;
    --header-h: 72px;
  }
}