/* WhiteSpace Studio design tokens
   The single source for colour, type, space, radius and motion.
   Every page and every section reads from here. Never hard-code a hex in a component.
   See docs/design-language.md for how and when to use each one. */

:root {
  /* ── Colour primitives (from the moodboard) ───────────────────────── */
  --ink:          #14171f;  /* night navy-black: primary dark, body text */
  --bistre:       #271d14;  /* warm brown-black */
  --black-olive:  #323730;  /* green-black */
  --olive:        #3b4138;  /* dark olive */
  --forest:       #0c2a1e;  /* deepest green */
  --fern:         #354e39;  /* mid green */
  --reseda:       #788372;  /* grey-green */
  --sage:         #9ea998;  /* pale green */
  --lime:         #d2f53c;  /* bright lime: the foundation-pricing bar only */
  --taupe:        #847c6e;  /* warm grey: muted text and labels on light */
  --rose:         #7e4444;  /* dusty rose: accent, buttons, numerals */
  --rosewood:     #661514;  /* deep red */
  --wine:         #451b20;  /* wine/mulberry */
  --black-bean:   #440e0c;  /* red-black */
  --paper:        #ffffff;  /* page background: pure white */
  --status-open:  #25b246;  /* clock dot: studio open (Edition's green) */
  --status-closed:#d8d8d8;  /* clock dot: studio closed */
  --paper-deep:   #f2f1ee;  /* soft warm grey: chips, inset panels, image placeholders */
  --blush:        #ecd3cb;  /* pale rose: text on the red themes */

  /* ── Default (paper) semantic roles ───────────────────────────────── */
  --bg:         var(--paper);
  --fg:         var(--ink);
  --line-strong: var(--fg);
  --surface:    var(--paper-deep);
  --accent:     var(--wine);   /* main accent: burgundy */
  --accent-fg:  var(--paper);

  /* ── Type ─────────────────────────────────────────────────────────── */
  --font-display: "Instrument Serif", "Times New Roman", serif;   /* editorial serif */
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "DM Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Fluid scale: phone → 1440 desktop */
  --text-mega:      clamp(3.25rem, 10.4vw, 9.375rem);          /* 52 → 150: home hero */
  --text-hero:      clamp(3.5rem, 1.2rem + 9.6vw, 9.375rem);   /* 56 → 150 */
  --text-display:   clamp(3rem, 1.4rem + 7vw, 8.125rem);       /* 48 → 130 */
  --text-h2:        clamp(2.5rem, 1.6rem + 3.6vw, 5rem);       /* 40 → 80 */
  --text-statement: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem);   /* 28 → 52 */
  --text-h4:        clamp(1.75rem, 1.4rem + 1.2vw, 2.75rem);   /* 28 → 44 */
  --text-h5:        clamp(1.375rem, 1.2rem + 0.7vw, 2rem);     /* 22 → 32 */
  --text-lead:      clamp(1.125rem, 1rem + 0.5vw, 1.5rem);     /* 18 → 24 */
  --text-body:      1.125rem;                                   /* 18 */
  --text-small:     1rem;                                       /* 16 */
  --text-button:    clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem); /* 17 → 20 */
  --text-label:     0.875rem;                                   /* 14 mono */
  --text-micro:     0.75rem;                                    /* 12 mono */

  --leading-hero:    0.96;
  --leading-display: 1.05;
  --leading-tight:   1.2;
  --leading-body:    1.45;

  --tracking-mega:    -0.04em;
  --tracking-hero:    -0.03em;
  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-mono:    0.04em;

  /* ── Space & layout ───────────────────────────────────────────────── */
  --gutter:        clamp(16px, 3.2vw, 45px);   /* page side margin */
  --footer-gutter: clamp(20px, 2.1vw, 30px);   /* footer side margin */
  --grid-gap:      clamp(16px, 2.1vw, 30px);   /* 12-column gap */
  --max:           none;                       /* sections run edge to edge inside the gutter */
  --container-small:  48rem;                   /* 768: short centred copy */
  --container-medium: 64rem;                   /* 1024: centred statements */
  --container-cta:    72rem;                   /* 1152: CTA headline */

  --section-sm:    3rem;
  --section-md:    clamp(5rem, 3rem + 4vw, 7.5rem);
  --section-lg:    clamp(7rem, 4rem + 10vw, 13.5rem);  /* ~216px gap on desktop */
  --section-xl:    clamp(8rem, 4rem + 12vw, 16rem);

  /* ── Shape ────────────────────────────────────────────────────────── */
  --radius-image:  clamp(12px, 1.2vw, 16px);
  --radius-tile:   12px;
  --radius-pill:   999px;
  --hairline:      1px;

  /* ── Motion ───────────────────────────────────────────────────────── */
  --ease-out:      cubic-bezier(0.215, 0.61, 0.355, 1);  /* reveals */
  --ease-ui:       cubic-bezier(0.25, 0.46, 0.45, 0.94); /* hovers, buttons */
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);    /* word pop, small overshoot */
  --dur-fast:      0.2s;
  --dur-ui:        0.3s;
  --dur-reveal:    0.6s;
  --dur-theme:     0.7s;  /* whole-page colour swap */
}

/* ── Colour themes ────────────────────────────────────────────────────
   Put data-theme on any section (or on <body> for the page-swap effect).
   Each theme is a background/foreground pair plus an accent that reads on it. */

[data-theme="paper"]    { --bg: var(--paper);       --fg: var(--ink);    --accent: var(--wine);     --accent-fg: var(--paper); --surface: var(--paper-deep); }
[data-theme="ink"]      { --bg: var(--ink);         --fg: var(--paper);  --accent: var(--rose);     --accent-fg: var(--paper); --surface: #1d212b; }
[data-theme="forest"]   { --bg: var(--forest);      --fg: var(--paper);  --accent: var(--sage);     --accent-fg: var(--forest); --surface: #133526; }
[data-theme="fern"]     { --bg: var(--fern);        --fg: var(--paper);  --accent: var(--sage);     --accent-fg: var(--forest); --surface: #3e5a42; }
[data-theme="olive"]    { --bg: var(--olive);       --fg: var(--paper);  --accent: var(--sage);     --accent-fg: var(--olive); --surface: #454c42; }
[data-theme="sage"]     { --bg: var(--sage);        --fg: var(--forest); --accent: var(--forest);   --accent-fg: var(--paper); --surface: #aeb7a8; }
[data-theme="bistre"]   { --bg: var(--bistre);      --fg: var(--paper);  --accent: var(--rose);     --accent-fg: var(--paper); --surface: #33271c; }
[data-theme="rosewood"] { --bg: var(--rosewood);    --fg: var(--blush);  --accent: var(--paper);    --accent-fg: var(--rosewood); --surface: #741c1b; }
[data-theme="wine"]     { --bg: var(--wine);        --fg: var(--blush);  --accent: var(--paper);    --accent-fg: var(--wine); --surface: #532228; }
[data-theme="bean"]     { --bg: var(--black-bean);  --fg: var(--blush);  --accent: var(--rose);     --accent-fg: var(--paper); --surface: #521411; }

/* Derived roles are re-declared wherever a theme is set, so they always mix
   from that theme's own colours rather than the page default. */
:root,
[data-theme] {
  --fg-muted:   color-mix(in srgb, var(--fg) 62%, var(--bg));
  --fg-faint:   color-mix(in srgb, var(--fg) 28%, var(--bg));
  --fg-grey:    color-mix(in srgb, var(--fg) 55%, var(--bg));   /* Edition's #767676 on paper */
  --line:       color-mix(in srgb, var(--fg) 18%, transparent);
}

[data-theme] {
  background-color: var(--bg);
  color: var(--fg);
}