/* ==========================================================================
   Design tokens
   Values mirror the reference build: 10px rem base, 1.6rem gutter,
   14rem vertical rhythm, 50px pill radius, #584dff highlight.
   ========================================================================== */

:root {
  /* ---- spacing ------------------------------------------------------- */
  --gutter: 1.6rem;          /* grid gap */
  --gutter-sm: 1.6rem;
  --gutter-xs: 0.8rem;
  --page-x: 2.4rem;          /* page edge inset — header, panels, rails */
  --rail-space: 0rem;        /* clearance reserved for the progress rail */
  --header-y: 1.1rem;        /* yields a 54px header with a 32px control */
  --vertical-gutter: 14rem;

  /* ---- radii --------------------------------------------------------- */
  --border-radius: 0.8rem;
  --border-radius-lg: 1.6rem;
  --border-radius-pill: 50px;

  /* ---- control sizing ------------------------------------------------ */
  --button-padding: 1.6rem;
  --button-height: 2.4rem;
  --button-height-md: 3.2rem;
  --button-height-lg: 3.6rem;

  /* ---- raw palette --------------------------------------------------- */
  --white: #fff;
  --black: #000;
  --purple: #584dff;
  --cool-grey: #edf1f5;
  --dark-purple: #100037;
  --mid-grey: #c7c7c7;

  /* neutral ramp */
  --neutral-100: #fff;
  --neutral-99: #fffbff;
  --neutral-95: #f4eff4;
  --neutral-90: #e6e1e6;
  --neutral-80: #cac5ca;
  --neutral-70: #aeaaae;
  --neutral-60: #938f94;
  --neutral-50: #79767a;
  --neutral-40: #605d62;
  --neutral-35: #545156;
  --neutral-30: #48464a;
  --neutral-25: #3d3b3e;
  --neutral-20: #313033;
  --neutral-10: #1c1b1e;
  --neutral-0: #000;

  /* ---- semantic (dark theme is the default) -------------------------- */
  --fg: #fff;
  --fg-invert: #000;
  --text-bold: #fff;
  --text-bold-invert: #000;
  --text-regular: #cac5ca;
  --text-regular-invert: #313033;
  --text-subtle: #79767a;
  --text-subtle-invert: #605d62;
  --text-error: #ff6060;

  --border-bold: #fff;
  --border-highlight: #584dff;
  --border-subtle: #313033;
  --border-subtle-invert: #c7c7c7;

  --button-bg: hsla(0, 0%, 73%, 0.2);

  --bg: #000;
  --bg-subtle: #171717;
  --bg-subtle-invert: #edf1f5;
  --bg-invert: #fff;
  --bg-highlight: #584dff;

  /* ---- type ---------------------------------------------------------- */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Fluid display scale — 88px at a 1280px viewport, as measured on the reference. */
  --fs-display-xl: clamp(4.4rem, 11vw, 16rem);
  --fs-display-lg: clamp(3.8rem, 6.875vw, 11rem);
  --fs-display-md: clamp(3.2rem, 4.6vw, 7.2rem);
  --fs-display-sm: clamp(2.6rem, 3.2vw, 4.8rem);
  --fs-body-lg: clamp(1.8rem, 1.6vw, 2.4rem);
  --fs-body: 1.6rem;
  --fs-small: 1.4rem;
  --fs-label: 1.2rem;

  --lh-display: 1.18;
  --ls-display: -0.02em;
  --ls-body: -0.01em;
  --ls-label: 0.08em;

  /* ---- motion -------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.24s;
  --dur: 0.4s;
  --dur-slow: 0.8s;

  /* ---- layering ------------------------------------------------------ */
  --z-stack: 1;
  --z-menu: 80;
  --z-header: 90;   /* above the overlay — it holds the close control */
  --z-cursor: 100;

  /* Set by JS: the scroll engine's normalised progress for the active panel. */
  --panel-progress: 0;
}

@media (min-width: 901px) {
  :root { --rail-space: 3.2rem; }
}

/* Light mode. The reference inverts the whole surface and insets the stack
   into a rounded box, so the light page frames the media rather than being
   covered by it. */
:root[data-theme="light"] {
  --fg: #000;
  --text-bold: #000;
  --text-regular: #48464a;
  --text-subtle: #79767a;
  --border-bold: #000;
  --border-subtle: #d8d8dd;
  --bg-invert: #000;
  --button-bg: hsla(0, 0%, 45%, 0.14);
  --bg: #fff;
  --bg-subtle: #f6f6f8;
  --page-surface: #f2f2f5;
}

:root[data-theme="dark"],
:root:not([data-theme]) {
  --page-surface: #000;
}

/* Light panels flip the semantic layer without touching component CSS. */
.theme-light {
  --fg: #000;
  --text-bold: #000;
  --text-regular: #313033;
  --text-subtle: #605d62;
  --border-bold: #000;
  --border-subtle: #c7c7c7;
  --bg: #edf1f5;
  --bg-subtle: #fff;
  --bg-invert: #000;
  --button-bg: hsla(0, 0%, 40%, 0.14);
}