/* =========================================================
   NOWERA — Design Tokens
   Single source of truth for colour, type, spacing, motion.
   ========================================================= */

@font-face {
  font-family: "Metropolis";
  src: url("fonts/metropolis-light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src: url("fonts/metropolis-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src: url("fonts/metropolis-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src: url("fonts/metropolis-semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant";
  src: url("fonts/cormorant-garamond-var.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}

:root {
  /* ---- Brand palette (official) ---- */
  --deep-black: #090909;
  --soft-black: #111111;
  --graphite: #1a1a1a;
  --ivory: #f8f5ef;
  --warm-white: #fffdf9;
  --gold: #d2ac72;          /* Champagne Gold */
  --gold-soft: #e7c996;     /* Soft Gold */
  --beige: #ede3d6;         /* Warm Beige */

  /* ---- Derived neutrals (contrast-checked) ---- */
  --ink: var(--deep-black);
  --ink-muted: #4a4640;         /* on ivory ≈ 8.6:1 */
  --ink-subtle: #6b665e;        /* on ivory ≈ 5.3:1 */
  --paper-muted: #b9b3a9;       /* on deep black ≈ 9.6:1 */
  --paper-subtle: #8c877f;      /* on deep black ≈ 5.6:1 */
  --gold-ink: #8a6a37;          /* gold text on light ≈ 4.6:1 */

  --line-dark: rgba(248, 245, 239, 0.12);
  --line-dark-strong: rgba(248, 245, 239, 0.22);
  --line-light: rgba(9, 9, 9, 0.1);
  --line-light-strong: rgba(9, 9, 9, 0.2);

  --gold-hairline: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold-soft) 50%, var(--gold) 80%, transparent);
  --gold-metal: linear-gradient(135deg, #f3dcb2 0%, #d2ac72 38%, #9c7443 72%, #d9b682 100%);

  /* ---- Typography ---- */
  --font-sans: "Metropolis", "Avenir Next", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-serif: "Cormorant", "Cormorant Garamond", "Iowan Old Style", "Times New Roman", serif;

  --fs-hero: clamp(3.4rem, 1.2rem + 9.4vw, 9.25rem);          /* 54 → 148px */
  --fs-display: clamp(2.6rem, 1rem + 6.4vw, 7.5rem);          /* section statements */
  --fs-h2: clamp(2.2rem, 1.1rem + 4vw, 5rem);
  --fs-h3: clamp(1.6rem, 1.1rem + 1.8vw, 2.75rem);
  --fs-h4: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
  --fs-lead: clamp(1.1rem, 0.98rem + 0.5vw, 1.4rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  --lh-tight: 0.92;
  --lh-snug: 1.1;
  --lh-body: 1.65;

  --tracking-tight: -0.035em;
  --tracking-snug: -0.02em;
  --tracking-wide: 0.18em;
  --tracking-wordmark: 0.32em;

  /* ---- Spacing (8pt, spacious) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-11: 12rem;

  --section-y: clamp(6rem, 4rem + 9vw, 13rem);
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 4rem);
  --container: 1440px;
  --container-narrow: 1080px;

  /* ---- Shape ---- */
  --radius-xs: 2px;
  --radius-s: 4px;
  --radius-m: 10px;
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-soft: 0 1px 1px rgba(9, 9, 9, 0.03), 0 12px 32px -12px rgba(9, 9, 9, 0.14);
  --shadow-lift: 0 2px 2px rgba(9, 9, 9, 0.03), 0 28px 60px -24px rgba(9, 9, 9, 0.24);
  --shadow-device: 0 40px 80px -30px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);

  /* ---- Motion (mirrored in config.js) ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);       /* cinematic out */
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);    /* curtains / wipes */
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --dur-xs: 160ms;
  --dur-s: 280ms;
  --dur-m: 520ms;
  --dur-l: 900ms;

  /* ---- Layers ---- */
  --z-base: 1;
  --z-sticky: 10;
  --z-nav: 50;
  --z-menu: 60;
  --z-dialog: 80;
  --z-consent: 85;
  --z-cursor: 90;
  --z-transition: 100;

  --nav-h: 76px;
}

@media (max-width: 767px) {
  :root { --nav-h: 64px; }
}