/* =====================================================================
   UBX design tokens
   Every visual value in the site lives here. Components use the
   SEMANTIC tokens only; primitives exist to feed them.

   Concept: "Light breaking in". The default theme is LIGHT (Cream).
   .theme-stage remaps tokens for the black-and-gold moments,
   .theme-sunshine for the bold yellow band.

   Breakpoints (media queries cannot read custom properties):
     sm  640px   md  960px   lg  1280px
   Mobile first: base styles are for phones, then min-width upwards.
   ===================================================================== */

:root {
  /* -------------------------------------------------------------------
     PRIMITIVES: colour
     ------------------------------------------------------------------- */
  /* Warm neutrals, stage black to warm white */
  --color-neutral-0: #0B0A09;   /* Stage black */
  --color-neutral-50: #151311;  /* Stage raised */
  --color-neutral-100: #14110F; /* Ink, text and buttons on light */
  --color-neutral-200: #2A2520;
  --color-neutral-300: #4A433C; /* Muted text on light, 9.49:1 */
  --color-neutral-400: #6B6259;
  --color-neutral-500: #8F877C;
  --color-neutral-600: #B5AEA3; /* Muted text on stage, 8.99:1 */
  --color-neutral-700: #D9D1C4;
  --color-neutral-800: #F2EDE4;
  --color-neutral-900: #FFFCF5; /* Cream: clean warm white */
  --color-neutral-950: #FFFFFF; /* White, cards */

  /* Gold, sampled from the cover lettering: #C8B982 */
  --color-gold-50: #FBF7EC;
  --color-gold-100: #F3E6C4;    /* Light streak highlight */
  --color-gold-200: #E6D6A8;
  --color-gold-300: #D8C893;
  --color-gold-400: #C8B982;    /* Primary gold */
  --color-gold-500: #B09D63;
  --color-gold-600: #8F7C45;
  --color-gold-700: #6E5E31;
  --color-gold-800: #4E4222;
  --color-gold-900: #2E2714;

  /* Sunshine: the joy colour */
  --color-sunshine-50: #FFFBEA;
  --color-sunshine-100: #FFF3C4;
  --color-sunshine-200: #FFE58A;
  --color-sunshine-300: #FFC83D; /* Sunshine, joy band. Ink on it 12.16:1 */
  --color-sunshine-400: #F5B21B;
  --color-sunshine-500: #DE9A0B;
  --color-sunshine-600: #B47B07;
  --color-sunshine-700: #855A07;
  --color-sunshine-800: #5C3E08;
  --color-sunshine-900: #3A2706;

  /* Tangerine: the pop accent */
  --color-tangerine-50: #FFF5EE;
  --color-tangerine-100: #FFE6D6;
  --color-tangerine-200: #FFC7A8;
  --color-tangerine-300: #FFA45C;
  --color-tangerine-400: #FF8547;
  --color-tangerine-500: #FF6B35; /* Tangerine, decorative and large only */
  --color-tangerine-600: #E8521A; /* Large numerals on white, 3.63:1 */
  --color-tangerine-700: #C2410C; /* Accent text on white, 5.05:1 */
  --color-tangerine-800: #9A3412;
  --color-tangerine-900: #7C2D12; /* Accent text on Sunshine, 6.06:1 */

  --color-success: #2F6B3A;
  --color-error: #A3322A;

  /* -------------------------------------------------------------------
     PRIMITIVES: type
     ------------------------------------------------------------------- */
  --font-family-display: "Marcellus", "Times New Roman", serif;
  --font-family-body: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-accent: "Newsreader", Georgia, serif;
  --font-family-mark: "Cinzel", "Marcellus", "Times New Roman", serif;   /* the heavy UBX lettering, as on the cover */

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Fluid scale: 375px to 1440px viewport. Body (300) never below 17px. */
  --font-size-50: 0.625rem;                                       /* 10, wordmark sub line only */
  --font-size-100: clamp(0.8125rem, 0.79rem + 0.09vw, 0.875rem);  /* 13 to 14, eyebrows */
  --font-size-200: clamp(0.9375rem, 0.91rem + 0.12vw, 1rem);      /* 15 to 16, captions, UI */
  --font-size-300: clamp(1.0625rem, 1.04rem + 0.09vw, 1.125rem);  /* 17 to 18, body */
  --font-size-400: clamp(1.1875rem, 1.12rem + 0.28vw, 1.375rem);  /* 19 to 22, lead */
  --font-size-500: clamp(1.375rem, 1.24rem + 0.56vw, 1.75rem);    /* 22 to 28 */
  --font-size-600: clamp(1.75rem, 1.5rem + 1.13vw, 2.5rem);       /* 28 to 40 */
  --font-size-700: clamp(2.25rem, 1.75rem + 2.25vw, 3.75rem);     /* 36 to 60 */
  --font-size-800: clamp(2.5rem, 1.6rem + 3.8vw, 5.25rem);        /* 40 to 84 */
  --font-size-900: clamp(2.75rem, 0.4rem + 8.5vw, 8.5rem);        /* hero, ~8.5vw */

  --line-height-tight: 0.98;
  --line-height-snug: 1.15;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.2em;

  /* -------------------------------------------------------------------
     PRIMITIVES: space (4px base)
     ------------------------------------------------------------------- */
  --space-px: 1px;
  --space-0-5: 0.125rem; /* 2 */
  --space-1: 0.25rem;    /* 4 */
  --space-2: 0.5rem;     /* 8 */
  --space-3: 0.75rem;    /* 12 */
  --space-4: 1rem;       /* 16 */
  --space-5: 1.25rem;    /* 20 */
  --space-6: 1.5rem;     /* 24 */
  --space-8: 2rem;       /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-16: 4rem;      /* 64 */
  --space-20: 5rem;      /* 80 */
  --space-24: 6rem;      /* 96 */
  --space-32: 8rem;      /* 128 */
  --space-fluid-section: clamp(5rem, 3.2rem + 7.5vw, 10rem);
  --space-fluid-stack: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);

  /* -------------------------------------------------------------------
     PRIMITIVES: shape, depth, layering
     ------------------------------------------------------------------- */
  --radius-none: 0;
  --radius-sm: 0.375rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2.25rem;
  --radius-full: 999px;

  --border-width-hairline: 1px;
  --border-width-thick: 2px;

  /* Warm-tinted, soft */
  --shadow-sm: 0 1px 2px rgb(74 52 30 / 0.08), 0 4px 12px -4px rgb(74 52 30 / 0.1);
  --shadow-md: 0 18px 40px -18px rgb(74 52 30 / 0.32);
  --shadow-lg: 0 50px 110px -40px rgb(40 24 12 / 0.55);

  --z-below: -1;
  --z-base: 1;
  --z-raised: 3;
  --z-header: 50;
  --z-overlay: 60;
  --z-transition: 90;
  --z-modal: 100;

  /* -------------------------------------------------------------------
     PRIMITIVES: motion
     ------------------------------------------------------------------- */
  --duration-instant: 0ms;
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 500ms;
  --duration-reveal: 900ms;
  --duration-page: 700ms;
  --duration-intro: 700ms;   /* intro hold; exit adds --duration-slow, total under 1.2s */
  --duration-loop: 1600ms;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1); /* expo-out; GSAP uses "expo.out" */

  /* -------------------------------------------------------------------
     PRIMITIVES: layout and ratios
     ------------------------------------------------------------------- */
  --container-max: 80rem;      /* 1280 */
  --container-narrow: 52rem;   /* 832 */
  --gutter: clamp(1.25rem, 0.8rem + 1.8vw, 2.5rem);
  --header-height: 5rem;
  --header-height-compact: 4rem;
  --tap-target: 2.75rem;       /* 44 */
  --field-height: 3.5rem;      /* 56, form inputs */
  --icon-size: 1.25rem;        /* 20 */

  --ratio-hero: 16 / 9;
  --ratio-landscape: 3 / 2;
  --ratio-portrait: 4 / 5;
  --ratio-full-length: 2 / 3;   /* full-length author portraits (About) */
  --ratio-tall: 3 / 4.2;
  --ratio-square: 1 / 1;
  --ratio-book: 2 / 3;

  --ratio-cover: 1533 / 2286;           /* the real cover file */
  --hero-book-width: clamp(11rem, 3.5rem + 12vw, 16rem);        /* Home hero book; the whole composition scales from it */
  --hero-book-width-mobile: 9.5rem;
  --hero-book-width-tablet: 13rem;
  --hero-min-height: 46rem;
  --hero-city-height: 70%;              /* skyline layer: lower part of the hero, faded in from above */
  --hero-city-height-mobile: 45%;
  --hero-city-opacity: 1;
  --hero-sky-opacity: 0.95;
  --hero-scene-fade-start: 1.3;         /* sky and city: full until ~15% scrolled out */
  --hero-scene-fade-rate: 2;            /* ...and gone by ~65%, letting the gold flood through */
  --band-card-width: clamp(16rem, 13rem + 12vw, 25rem);
  --book-max: 26rem;
  --panel-max: 44rem;
  --menu-max: 15rem;
  --perspective: 75rem;
  --blur-fill: 40px;
  --measure: 60ch;
  --measure-narrow: 44ch;
  --page-hero-min: 86svh;               /* About and Experience heroes */
  --film-max: 64rem;                   /* 1024, Home intro film */
  --profile-media: 26rem;               /* author portrait column */
  --play-size: 3rem;                    /* 48, track play buttons */
  --play-size-lg: 4rem;                 /* 64, now playing */
  --now-cover: 5.5rem;                  /* now playing cover thumbnail */
  --progress-height: 3px;
  --pill-height: 3.5rem;                /* 56, tab bar */

  /* =====================================================================
     SEMANTIC TOKENS (what components use)
     Default theme is LIGHT (Cream).
     ===================================================================== */

  /* Fixed surfaces */
  --color-stage: var(--color-neutral-0);
  --color-stage-raised: var(--color-neutral-50);
  --color-cream: var(--color-neutral-900);
  --color-sunshine: var(--color-sunshine-300);
  --color-sunshine-soft: var(--color-sunshine-100);
  --color-cta-end: var(--color-tangerine-300);
  --color-gold: var(--color-gold-400);
  --color-gold-light: var(--color-gold-300);
  --color-streak: var(--color-gold-100);

  /* Contextual (themeable) */
  --color-bg: var(--color-cream);
  --color-bg-alt: var(--color-sunshine-soft);
  --color-surface: var(--color-neutral-950);
  --color-surface-inverse: var(--color-stage);
  --color-text: var(--color-neutral-100);
  --color-text-muted: var(--color-neutral-300);
  --color-text-inverse: var(--color-neutral-900);
  --color-text-accent: var(--color-tangerine-700);
  --color-numeral: var(--color-tangerine-600);
  --color-wordmark: var(--color-neutral-100);
  --color-wordmark-sub: var(--color-tangerine-700);
  --color-border: rgb(26 23 20 / 0.12);
  --color-border-strong: rgb(26 23 20 / 0.32);

  --color-action-bg: var(--color-neutral-100);
  --color-action-bg-hover: var(--color-tangerine-700);
  --color-action-text: var(--color-neutral-950);
  --color-pop: var(--color-tangerine-500);
  --color-pop-text: var(--color-neutral-100);
  --color-action-secondary-border: rgb(26 23 20 / 0.4);
  --color-action-secondary-border-hover: var(--color-neutral-100);
  --color-action-secondary-text: var(--color-neutral-100);
  --color-action-secondary-bg-hover: rgb(26 23 20 / 0.06);
  --color-focus-ring: var(--color-tangerine-700);
  --color-hover-pill: rgb(26 23 20 / 0.06);
  --color-field-bg: var(--color-neutral-950);
  --color-field-error: var(--color-error);
  --color-field-success: var(--color-success);

  --color-placeholder-from: var(--color-sunshine-100);
  --color-placeholder-to: var(--color-tangerine-50);
  --color-placeholder-end: var(--color-sunshine-200);
  --color-placeholder-streak: var(--color-tangerine-400);
  --color-placeholder-word: rgb(194 65 12 / 0.2);

  --color-progress: var(--color-tangerine-600);
  --color-progress-track: rgb(26 23 20 / 0.1);
  --color-panel-bg: rgb(11 10 9 / 0.88);
  --color-scrim: rgb(11 10 9 / 0.55);
  --color-text-shadow: rgb(0 0 0 / 0.45);
  --color-dawn: rgb(255 200 61 / 0.35);

  /* Home hero: sun disc, book, device */
  --color-sun-core: var(--color-sunshine-100);
  --color-sun-mid: var(--color-sunshine-300);
  --color-sun-edge: var(--color-tangerine-400);
  --color-sun-glow: rgb(255 200 61 / 0.22);
  --color-sun-ring: rgb(255 255 255 / 0.22);
  --color-trail-glow: rgb(243 230 196 / 0.7);
  --color-city-scrim: rgb(11 10 9 / 0.6);
  --color-city-glow: rgb(255 210 122 / 0.35);     /* sunset glow behind the skyline */
  --color-city-floor: rgb(11 10 9 / 0.82);       /* calm band behind the hero's bottom row */
  --color-phone-edge: #3A332A;                   /* the hero phone's metal side */
  --color-phone-side: #6E5E31;
  --color-backlight: rgb(240 176 80 / 0.34);     /* warm light behind the hero book */
  --color-book-shadow: rgb(0 0 0 / 0.7);
  --color-pages: var(--color-neutral-800);
  --color-pages-line: var(--color-neutral-700);
  --color-device-edge: var(--color-neutral-200);
  --color-device-rim: rgb(255 255 255 / 0.14);
  --color-device-panel: rgb(251 246 236 / 0.06);
  --color-chip-bg: rgb(21 19 17 / 0.72);

  /* Typography roles: size / line-height / weight / tracking */
  --text-display-size: var(--font-size-900);
  --text-display-lh: var(--line-height-tight);
  --text-display-weight: var(--font-weight-regular);
  --text-display-tracking: var(--tracking-tight);

  --text-hero-size: clamp(3rem, 1.3rem + 5.2vw, 7.25rem);   /* Home hero headline, 48 to 116 */
  --text-hero-lh: 0.94;
  --hero-name-size: clamp(1.375rem, 0.95rem + 1.1vw, 2.125rem);    /* "The Urban Bible Experience", 22 to 34 */
  --hero-sub-size: clamp(1.0625rem, 0.85rem + 0.55vw, 1.375rem);   /* "An Abbreviated Paraphrase", 17 to 22 */
  --hero-quote-size: clamp(1.5rem, 1rem + 1.1vw, 2.25rem);          /* "More than a book", 24 to 36 */
  --hero-mark-size: clamp(4.5rem, 2rem + 6.4vw, 8.5rem);           /* "UBX", 72 to 136 */

  --text-h1-size: clamp(1.875rem, 1.3rem + 2.4vw, 3.25rem);
  --text-h1-lh: var(--line-height-snug);
  --text-h1-weight: var(--font-weight-regular);
  --text-h1-tracking: var(--tracking-tight);

  --text-h2-size: var(--font-size-700);
  --text-h2-lh: var(--line-height-snug);
  --text-h2-weight: var(--font-weight-regular);
  --text-h2-tracking: var(--tracking-tight);

  --text-h3-size: var(--font-size-500);
  --text-h3-lh: var(--line-height-snug);
  --text-h3-weight: var(--font-weight-bold);
  --text-h3-tracking: var(--tracking-normal);

  --text-statement-size: var(--font-size-800);
  --text-statement-lh: 1.08;

  --text-body-lg-size: var(--font-size-400);
  --text-body-lg-lh: var(--line-height-relaxed);
  --text-body-size: var(--font-size-300);
  --text-body-lh: var(--line-height-relaxed);
  --text-small-size: var(--font-size-200);
  --text-small-lh: var(--line-height-normal);

  --text-eyebrow-size: var(--font-size-100);
  --text-eyebrow-lh: var(--line-height-normal);
  --text-eyebrow-weight: var(--font-weight-bold);
  --text-eyebrow-tracking: var(--tracking-wider);

  --text-page-title-size: var(--font-size-800);

  --text-quote-size: var(--font-size-700);
  --text-quote-lh: 1.2;
  --text-quote-weight: var(--font-weight-regular);
  --text-quote-tracking: var(--tracking-tight);

  --text-button-size: var(--font-size-200);
  --text-button-weight: var(--font-weight-bold);
  --text-button-tracking: var(--tracking-wide);

  /* Spacing roles */
  --space-section: var(--space-fluid-section);
  --space-stack-sm: var(--space-4);
  --space-stack-md: var(--space-8);
  --space-stack-lg: var(--space-fluid-stack);
  --space-inline-sm: var(--space-3);
  --space-inline-md: var(--space-6);
  --button-pad-y: var(--space-4);
  --button-pad-x: var(--space-6);

  /* Motion roles */
  --motion-button: var(--duration-base) var(--ease-out);
  --motion-reveal: var(--duration-reveal) var(--ease-emphasis);
  --motion-header: var(--duration-slow) var(--ease-out);
  --motion-page: var(--duration-page) var(--ease-emphasis);
  --reveal-distance: 24px;
  --reveal-stagger: 90ms;
  --parallax-strength: 0.08;   /* max ~8% of element height */
  --tilt-max: 6;               /* degrees, book cover pointer tilt */
  --nudge-distance: 4px;
  --lift-distance: -6px;
}

/* Stage theme: the black-and-gold moments (hero, quote, footer, menus) */
.theme-stage {
  --color-bg: var(--color-stage);
  --color-bg-alt: var(--color-stage-raised);
  --color-surface: var(--color-stage-raised);
  --color-surface-inverse: var(--color-cream);
  --color-text: var(--color-neutral-900);
  --color-text-muted: var(--color-neutral-600);
  --color-text-inverse: var(--color-neutral-100);
  --color-text-accent: var(--color-gold-400);
  --color-numeral: var(--color-gold-400);
  --color-wordmark: var(--color-gold-400);
  --color-wordmark-sub: var(--color-neutral-600);
  --color-border: rgb(200 185 130 / 0.22);
  --color-border-strong: rgb(200 185 130 / 0.5);

  --color-action-bg: var(--color-gold-400);
  --color-action-bg-hover: var(--color-gold-200);
  --color-action-text: var(--color-neutral-0);
  --color-action-secondary-border: rgb(251 246 236 / 0.45);
  --color-action-secondary-border-hover: var(--color-gold-400);
  --color-action-secondary-text: var(--color-neutral-900);
  --color-action-secondary-bg-hover: rgb(200 185 130 / 0.12);
  --color-focus-ring: var(--color-gold-300);
  --color-hover-pill: rgb(251 246 236 / 0.1);
  --color-progress: var(--color-gold-400);
  --color-progress-track: rgb(251 246 236 / 0.16);
}

/* Sunshine theme: the bold joyful band */
.theme-sunshine {
  --color-bg: var(--color-sunshine);
  --color-bg-alt: var(--color-cream);
  --color-text-muted: var(--color-neutral-300);
  --color-text-accent: var(--color-tangerine-900);
  --color-numeral: var(--color-tangerine-900);
  --color-border: rgb(26 23 20 / 0.18);
}

/* One switch turns all motion off */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-reveal: 0ms;
    --duration-page: 0ms;
    --duration-intro: 0ms;
    --duration-loop: 0ms;
    --reveal-distance: 0px;
    --reveal-stagger: 0ms;
    --parallax-strength: 0;
    --tilt-max: 0;
    --nudge-distance: 0px;
    --lift-distance: 0px;
  }
}