/* ============================================
   FANDORA — DESIGN TOKENS
   ============================================ */

/* Metric-matched local fallbacks — cuts first-paint nav/font jump before webfonts load. */
@font-face {
  font-family: "Plus Jakarta Sans Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 103%;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 101%;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "JetBrains Mono Fallback";
  src: local("Consolas"), local("Menlo"), local("Courier New");
  size-adjust: 98%;
  ascent-override: 90%;
  descent-override: 25%;
  line-gap-override: 0%;
}

:root {
  /* ---- Color: Oxblood → Black backdrop ---- */
  --ink-000: #000000;
  --ink-100: #0a0405;
  --ink-200: #14080a;
  --ink-300: #1f0d0f;
  --ink-400: #2a1215;
  --ink-500: #3d181b;
  --ink-600: #5e241c;       /* brand oxblood */
  --ink-ash: #1a1417;       /* neutral dark surface */

  /* ---- Color: Gold spectrum ---- */
  --gold-900: #7a4a11;
  --gold-800: #bf7326;      /* brand gold low */
  --gold-700: #d4913a;
  --gold-600: #e3a74d;
  --gold-500: #f2c368;      /* core gold */
  --gold-400: #f7d688;
  --gold-300: #fbe4a8;
  --gold-200: #ffeda6;      /* brand gold high */
  --gold-100: #fff4c9;

  /* Liquid-metal gradient — used for the precious moments */
  --gold-metal: linear-gradient(
    135deg,
    #bf7326 0%,
    #e3a74d 18%,
    #fff4c9 38%,
    #ffeda6 52%,
    #d4913a 72%,
    #bf7326 100%
  );
  --gold-metal-soft: linear-gradient(
    135deg,
    #bf7326 0%,
    #f2c368 50%,
    #ffeda6 100%
  );

  /* Oxblood vignette — used as page backdrop */
  --backdrop: radial-gradient(
    ellipse 90% 60% at 50% 0%,
    #5e241c 0%,
    #2a1215 35%,
    #0a0405 70%,
    #000000 100%
  );

  /* ---- Color: Neutral text ---- */
  --white: #ffffff;
  --text-primary: rgba(255, 255, 255, 0.96);
  --text-secondary: rgba(255, 255, 255, 0.78);
  --text-tertiary: rgba(255, 255, 255, 0.42);
  --text-disabled: rgba(255, 255, 255, 0.22);
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.14);
  --hairline-gold: rgba(242, 195, 104, 0.22);

  /* ---- Type ---- */
  /* Fallbacks use size-adjust so first paint metrics match webfonts (less nav jump). */
  --font-display: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, sans-serif;
  --font-body: "Manrope", "Manrope Fallback", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, monospace;

  /* Fluid type scale — desktop-first, capped at the extremes */
  --t-mono: 11px;                        /* technical/label */
  --t-micro: 12px;                       /* small body */
  --t-small: clamp(13px, 0.9vw, 14px);
  --t-body: clamp(15px, 1vw, 16px);
  --t-lead: clamp(17px, 1.25vw, 20px);
  --t-h6: clamp(20px, 1.5vw, 24px);
  --t-h5: clamp(24px, 2vw, 32px);
  --t-h4: clamp(32px, 2.8vw, 44px);
  --t-h3: clamp(42px, 4vw, 64px);
  --t-h2: clamp(56px, 6vw, 96px);
  --t-h1: clamp(72px, 9vw, 160px);
  --t-hero: clamp(88px, 13vw, 240px);

  --lh-tight: 0.92;
  --lh-snug: 1.05;
  --lh-normal: 1.35;
  --lh-relaxed: 1.55;

  --tracking-wide: 0.24em;
  --tracking-nav: 0.08em;
  --tracking-display: -0.025em;

  /* ---- Spacing / radius ---- */
  --r-xs: 4px;
  --r-s: 8px;
  --r-m: 14px;
  --r-l: 22px;
  --r-pill: 999px;

  --pad-page: clamp(28px, 5.5vw, 96px);

  /* ---- Motion ---- */
  --ease-inevitable: cubic-bezier(0.22, 1, 0.36, 1);   /* slow, glides in */
  --ease-emerge: cubic-bezier(0.16, 1, 0.3, 1);        /* expo out */
  --ease-linear: linear;
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 620ms;
  --dur-stage: 1100ms;

  /* ---- Elevation (sparingly) ---- */
  --glow-gold: 0 0 40px rgba(242, 195, 104, 0.35), 0 0 120px rgba(242, 195, 104, 0.12);
  --glow-oxblood: 0 0 80px rgba(94, 36, 28, 0.6);
  --shadow-card: 0 30px 60px -20px rgba(0, 0, 0, 0.6), 0 10px 20px -10px rgba(0, 0, 0, 0.4);
}

/* ============================================
   BASE
   ============================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  background: var(--ink-000);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  background: var(--backdrop);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
}

::selection { background: var(--gold-500); color: var(--ink-000); }

/* ============================================
   TYPE UTILITIES
   ============================================ */

.display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-tertiary);
}

.label-caps {
  font-family: var(--font-body);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  color: var(--text-secondary);
}

.gold-text {
  background: var(--gold-metal);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hairline {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--hairline-strong) 50%,
    transparent 100%
  );
  border: none;
  margin: 0;
}

.hairline-gold {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--gold-500) 50%,
    transparent 100%
  );
  border: none;
  opacity: 0.5;
}