/* ============================================================
   Soma Sensation Studio · Design Tokens
   Shared design system for all prototypes. Dark & flowing.
   ============================================================ */

:root {
  /* --- Color: warm espresso-black base --------------------- */
  --ink-900: #0b0807; /* deepest, near-black warm */
  --ink-800: #130d09;
  --ink-700: #1b120c; /* espresso (primary background) */
  --ink-600: #251911;
  --ink-500: #33241a;

  /* --- Color: gold / amber river --------------------------- */
  --gold-300: #f6dea0; /* highlight edge */
  --gold-400: #ecbf6a;
  --gold-500: #d9a441; /* primary metallic */
  --amber-500: #e08a2b;
  --amber-600: #c66f18;

  /* --- Color: text on dark --------------------------------- */
  --cream: #f4ede0;       /* primary text */
  --cream-dim: #cabaa3;   /* secondary text */
  --cream-faint: #8d7e6c; /* tertiary / captions */

  /* --- Semantic ------------------------------------------- */
  --bg: var(--ink-700);
  --bg-alt: var(--ink-800);
  --text: var(--cream);
  --text-dim: var(--cream-dim);
  --accent: var(--gold-500);
  --line: rgba(217, 164, 65, 0.18); /* hairline dividers */

  /* Gradient used by river strokes & accents */
  --river-grad: linear-gradient(100deg, var(--amber-600), var(--gold-500) 45%, var(--gold-300));

  /* --- Typography ----------------------------------------- */
  --font-heading: "Spectral", Georgia, "Times New Roman", serif;
  --font-body: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;

  /* Fluid type scale (min .. max via viewport) */
  --fs-display: clamp(3.2rem, 1.8rem + 6.2vw, 7.5rem);
  --fs-h1: clamp(2.4rem, 1.5rem + 3.6vw, 4.2rem);
  --fs-h2: clamp(1.9rem, 1.4rem + 2.1vw, 3rem);
  --fs-h3: clamp(1.35rem, 1.15rem + 0.9vw, 1.8rem);
  --fs-lead: clamp(1.22rem, 1.1rem + 0.55vw, 1.55rem);
  --fs-body: clamp(1.22rem, 1.12rem + 0.45vw, 1.42rem);
  --fs-small: 0.98rem;
  --fs-eyebrow: 0.8rem;

  --lh-tight: 1.04;
  --lh-snug: 1.2;
  --lh-body: 1.62;

  /* --- Spacing scale (rem) -------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;
  --section-y: clamp(4.5rem, 3rem + 7vw, 9rem);

  /* --- Layout --------------------------------------------- */
  --container: 72rem;     /* 1152px */
  --container-narrow: 46rem; /* readable prose column */
  --container-wide: 84rem;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);

  /* --- Disclosure marker (toolkit rows) --------------------- */
  /* The certifications label uses the same shape at its own, smaller text size. */
  --disclosure-size: calc(0.6 * clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem)); /* the gold triangle */
  --disclosure-col: calc(1.6 * clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem)); /* column it sits in; the title starts after it */

  /* --- Radii & shadow ------------------------------------- */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.75rem;
  --radius-pill: 999px;
  --shadow-soft: 0 1.5rem 4rem -1.5rem rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 2.5rem -0.5rem rgba(217, 164, 65, 0.35);

  /* --- Motion --------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.25s;
  --dur-med: 0.6s;
  --dur-slow: 1.1s;
}