/* ==========================================================================
   WEB PEARL — Design tokens
   Single source of truth. Change values here, never hard-code in sections.
   ========================================================================== */

/* Self-hosted fonts (GDPR-safe: nothing loads from third-party CDNs) */
@font-face {
  font-family: 'Familjen Grotesk';
  src: url('../assets/fonts/familjen-grotesk-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../assets/fonts/hanken-grotesk-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/fraunces-latin-wght-italic.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- Color ---- */
  --bg-0: #060606;            /* page base */
  --bg-1: #0b0b0c;            /* raised surface */
  --bg-2: #131315;            /* card surface */
  --ink: #f2f0ea;             /* pearl off-white text */
  --ink-muted: #9a988f;       /* secondary text */
  --ink-faint: #55534d;       /* captions, rules */

  --accent: #6fb4ff;          /* steel-blue glow (from logo edge light) */
  --accent-strong: #3d7eff;   /* interactive blue */
  --positive: #2fbf8f;        /* emerald — results & positives only */

  /* Nacre iridescence — pearl-derived ambient glows (Amphora-style warmth) */
  --nacre-lavender: #b9a8ff;
  --nacre-rose: #ffb3c7;
  --nacre-aqua: #8fe8d8;
  --nacre-champagne: #ffe3b3;
  --iridescent: linear-gradient(100deg,
    var(--nacre-aqua) 0%, var(--accent) 28%,
    var(--nacre-lavender) 55%, var(--nacre-rose) 82%,
    var(--nacre-champagne) 100%);

  --hairline: rgba(242, 240, 234, 0.08);
  --hairline-strong: rgba(242, 240, 234, 0.14);

  /* ---- Glass recipe (one recipe, reused everywhere) ---- */
  --glass-bg: rgba(19, 19, 21, 0.55);
  --glass-blur: 16px;
  --glass-edge: rgba(242, 240, 234, 0.1);
  --glass-highlight: linear-gradient(180deg, rgba(242,240,234,0.07), rgba(242,240,234,0) 30%);

  /* ---- Type ---- */
  --font-display: 'Familjen Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Hanken Grotesk', 'Segoe UI', sans-serif;
  --font-accent: 'Fraunces', Georgia, serif;

  --text-hero: clamp(2.6rem, 7.2vw, 6.4rem);
  --text-h2: clamp(2rem, 4.6vw, 3.9rem);
  --text-h3: clamp(1.3rem, 2.2vw, 1.7rem);
  --text-lead: clamp(1.05rem, 1.4vw, 1.25rem);
  --text-body: 1rem;
  --text-small: 0.85rem;
  --text-micro: 0.72rem;

  /* ---- Space ---- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 2rem;
  --space-4: 3.5rem;
  --space-5: 6rem;
  --space-section: clamp(6rem, 12vw, 11rem);
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --measure: 62ch;

  /* ---- Motion (two easings, three durations) ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);      /* entrances */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);    /* transitions */
  --dur-fast: 0.4s;
  --dur-med: 0.8s;
  --dur-slow: 1.2s;

  /* ---- Radii ---- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;
}