/* ============================================================
   Design tokens — the single source of truth for all 5 sites.
   Demo sites override only --accent* and --font-display.
   ============================================================ */

:root {
  /* --- Brand ------------------------------------------------ */
  --brand-name: "STUDIO";

  /* --- Color: dark base ------------------------------------- */
  /* Warm-shifted neutrals. Pure grey reads cheap; these carry a
     faint warmth that photographs and the neem accent sit inside. */
  --ink-000: #060607;
  --ink-050: #0a0a0c;
  --ink-100: #101014;
  --ink-200: #17171d;
  --ink-300: #22222a;
  --ink-400: #33333e;
  --ink-500: #4a4a58;

  /* Warm off-white. #fff against near-black glares; this doesn't. */
  --paper-000: #f6f4f0;
  --paper-100: #e8e5df;
  --paper-200: #c9c5bd;
  --paper-300: #918d86;
  --paper-400: #85817b;

  /* --- Color: semantic -------------------------------------- */
  --bg: var(--ink-000);
  --bg-raised: var(--ink-100);
  --bg-inset: var(--ink-050);
  --text: var(--paper-000);
  --text-muted: var(--paper-300);
  --text-dim: var(--paper-400);
  --line: rgb(255 255 255 / 0.09);
  --line-strong: rgb(255 255 255 / 0.16);

  /* Overlay ingredients. A theme that inverts to a light ground redefines
     these; without them the scrims and veils would stay hard-coded dark. */
  --scrim-rgb: 6 6 7;
  --header-veil: rgb(6 6 7 / 0.78);
  --tint: rgb(255 255 255 / 0.05);
  --rule-soft: rgb(255 255 255 / 0.2);
  --danger: #ff9a8a;

  /* --- Accent (overridden per demo site) --------------------- */
  --accent: #7fa34f;
  --accent-text: #a9cc85;
  --accent-contrast: #07120a;

  /* --- Scroll-linked atmosphere ------------------------------ */
  /* Driven by JS as the page scrolls. Defaults are the top-of-page
     state, so the page is correct before JS runs and if it never does. */
  --atmos-h: 232;
  --atmos-s: 44%;
  --atmos-a: 0.16;

  /* --- Type ------------------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid scale, 320px → 1600px viewport. */
  --t-eyebrow: 0.6875rem;
  --t-small: clamp(0.8125rem, 0.78rem + 0.16vw, 0.9375rem);
  --t-body: clamp(0.9375rem, 0.89rem + 0.24vw, 1.125rem);
  --t-lead: clamp(1.125rem, 1.02rem + 0.52vw, 1.5rem);
  --t-h3: clamp(1.375rem, 1.16rem + 1.05vw, 2.125rem);
  --t-h2: clamp(1.875rem, 1.36rem + 2.55vw, 3.75rem);
  --t-h1: clamp(2.75rem, 1.42rem + 6.63vw, 8rem);
  --t-mega: clamp(3.25rem, 1.35rem + 9.4vw, 9.5rem);

  --lh-tight: 0.95;
  --lh-snug: 1.12;
  --lh-normal: 1.5;
  --lh-loose: 1.65;

  --tr-tight: -0.035em;
  --tr-snug: -0.02em;
  --tr-normal: -0.01em;
  --tr-wide: 0.14em;

  /* --- Spacing: modular scale, no arbitrary pixels ----------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --s-11: 12rem;

  /* Section rhythm scales with viewport so sections breathe on
     desktop without stranding mobile users in empty space. */
  --section-y: clamp(4.5rem, 3rem + 7.5vw, 11rem);
  --gutter: clamp(1.25rem, 0.7rem + 2.75vw, 4.5rem);
  --measure: 62ch;
  --max-w: 84rem;

  /* --- Motion ----------------------------------------------- */
  /* One rhythm across all five sites. */
  --dur-fast: 0.2s;
  --dur-base: 0.45s;
  --dur-slow: 0.8s;
  --dur-reveal: 1.05s;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-linear: linear;

  /* --- Elevation & shape ------------------------------------ */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-full: 999px;
  --shadow-lift: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px -8px rgb(0 0 0 / 0.5);
  --shadow-deep: 0 2px 4px rgb(0 0 0 / 0.5), 0 40px 80px -20px rgb(0 0 0 / 0.7);

  --header-h: 4.5rem;
}