/* Copy of presets/portfolio-obs5/tokens.css (design tokens), kept here so prototypes/portfolio-v1 is self-contained for static hosting. */
/*
 * Portfolio preset OBSERVATORY MENU v5 (tokens v8, DRAFT): derived from tokens v7 (unchanged). Adds the night-sky
 * descent (violet glow -> midnight blue; levels capped for text contrast) and the galaxy nucleus. No new fonts.
 * Portfolio preset OBSERVATORY MENU v4 (tokens v7, DRAFT): derived from tokens v6 (unchanged). Documents the star
 * hierarchy (anchor/bright/base tiers), the sky ramp and the orbit path. No new colours or fonts.
 * Portfolio preset OBSERVATORY MENU v3 (tokens v6, DRAFT): derived from tokens v5 (unchanged). Adds interior display
 * voices benchmarked on the hero and the living-orbit timings. No new colours: the aura is colour-mixed from --obs-*.
 * Portfolio preset OBSERVATORY MENU (tokens v5, DRAFT): derived from Observatory tokens v4 (unchanged).
 * Adds a light, narrow display voice for the centred hero, orbit/centre-display sizes and the core glow.
 * Portfolio preset OBSERVATORY (tokens v4, DRAFT): derived from 4C (unchanged).
 * Adds the restrained LED field palette, grounding layer and interface-discipline tokens.
 * Portfolio preset 4C lineage: "Graphite Field" v3 (Design Lab Phase 4C, DRAFT). Derived from the 4B preset (unchanged).
 * Changes: smaller display scale, field/scrim tokens, journey timing.
 * Portfolio preset 4B lineage: "Graphite Field"
 * Near-black graphite foundation, one luminous accent (ion), restrained data colours.
 * Typography: Anybody within a NORMAL axis range (no extreme stretching) + Martian Mono for labels.
 * Fonts are declared by the consumer (prototypes/portfolio-4b/assets/fonts.css).
 */
:root {
  color-scheme: dark;

  /* ---- Surfaces (graphite ramp) ---- */
  --g-0: #0B0C0E;          /* page */
  --g-1: #111316;          /* sunken / section */
  --g-2: #171A1E;          /* raised card */
  --g-3: #1F2328;          /* panel, hover */
  --line: #2A2F35;         /* hairline (decorative) */
  --line-strong: #6B737C;  /* control borders: >= 3:1 against g-0, g-2 and g-3 (WCAG 1.4.11) */

  /* ---- Text ---- */
  --text: #ECEAE4;         /* 16.3:1 on g-0 */
  --text-2: #AAB0B7;       /* 9.0:1 on g-0 */
  --text-3: #858C94;       /* 5.8:1 on g-0, 4.65:1 on g-3; captions only */

  /* ---- Luminous accents (use sparingly) ---- */
  --ion: #7DE3D2;          /* primary accent: links, focus, live states (12.9:1 on g-0) */
  --ion-strong: #B4F3E8;
  --ion-wash: rgb(125 227 210 / 0.10);
  --ember: #F2B880;        /* secondary: results/outcomes highlights only (11.1:1) */
  --on-ion: #06201C;       /* text on ion fills */

  /* ---- Data palette (visualisations; muted, harmonised; not identity colours) ---- */
  --data-1: #7DE3D2; --data-2: #A99BFF; --data-3: #F2B880; --data-4: #8FD3FF; --data-5: #F29BBF;

  /* ---- Light, glow, depth ---- */
  --glow-ion: 0 0 0 1px rgb(125 227 210 / 0.35), 0 0 28px rgb(125 227 210 / 0.22);
  --shadow-1: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 18px 40px -24px rgb(0 0 0 / 0.9);
  --shadow-2: 0 1px 0 rgb(255 255 255 / 0.06) inset, 0 40px 80px -30px rgb(0 0 0 / 0.95);
  --stage-light: radial-gradient(60% 60% at 50% 40%, rgb(125 227 210 / 0.14), transparent 70%);

  /* ---- Type ---- */
  --font-display: "Anybody", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Anybody", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Martian Mono", ui-monospace, Menlo, monospace;
  --fvs-display: "wdth" 96, "wght" 620;
  --fvs-display-strong: "wdth" 100, "wght" 700;
  --fvs-text: "wdth" 100, "wght" 400;
  --fvs-text-strong: "wdth" 100, "wght" 560;
  --fvs-mono: "wdth" 87.5, "wght" 420;
  --kinetic-rest: "wdth" 92, "wght" 560;   /* selective kinetic type: hero name + active project only */
  --kinetic-active: "wdth" 108, "wght" 720;

  --step--2: clamp(0.72rem, 0.69rem + 0.1vw, 0.78rem);
  --step--1: clamp(0.84rem, 0.8rem + 0.15vw, 0.94rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.4vw, 1.45rem);
  --step-2: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --step-3: clamp(1.9rem, 1.5rem + 1.6vw, 3rem);
  --step-4: clamp(2.4rem, 1.7rem + 3vw, 4.6rem);
  --step-5: clamp(3rem, 1.8rem + 5vw, 6.6rem);
  --leading-tight: 0.98;
  --leading-text: 1.6;
  --tracking-mono: 0.04em;

  /* ---- 4C: display scale (intro reduced), field and scrim ---- */
  --display-hero: clamp(2rem, 1.25rem + 2.3vw, 3.4rem);   /* was step-4 (up to 4.6rem) in 4B */
  --display-hero-mobile: clamp(1.75rem, 1.3rem + 2.4vw, 2.3rem);
  --hero-measure: 19ch;
  --scrim-reading: linear-gradient(90deg, #0B0C0E 0%, rgb(11 12 14 / 0.92) 30%, rgb(11 12 14 / 0.55) 46%, transparent 62%);
  --field-points-desktop: 9000; --field-points-mobile: 5000; --field-dpr-cap: 1.25;
  --journey-damping: 7;   /* 1 - exp(-dt * k): scroll timeline smoothing */

  /* ---- Observatory: LED field palette (one hue per project formation; no rainbow) ---- */
  --obs-1: #7FE6C8;  /* luminous mint  · Headspace OS */
  --obs-2: #9CEBFF;  /* ice cyan       · Favente */
  --obs-3: #9DB8FF;  /* pale blue      · Marketing experiments */
  --obs-4: #79D49B;  /* alpine green   · Automation & software */
  --obs-5: #B3A4FF;  /* soft violet    · Research (occasional) */
  --obs-amber: #F2C27A; /* very restrained: selected-state tick only */
  --obs-horizon: rgb(127 230 200 / 0.06);
  --obs-contour: rgb(156 235 255 / 0.05);
  --obs-panel: rgb(13 16 19 / 0.82);
  --obs-tick: 10px;   /* geometric corner ticks on panels */
  --obs-field-span: 0.7; /* the core volume spans ~70% of the desktop viewport */
  --field-points-desktop: 12000; --field-drift-desktop: 2400; --field-drift-mobile: 1000;
  --idle-throttle-ms: 10000; --idle-pause-ms: 45000;

  /* ---- Observatory menu (v5): sleek hero voice, orbital navigation ---- */
  --fvs-hero: "wdth" 88, "wght" 320;      /* Anybody, light + narrow: restrained, not poster type */
  --fvs-list: "wdth" 94, "wght" 440;
  --hero-size: clamp(1.55rem, 0.95rem + 1.55vw, 2.45rem);
  --orbit-stage-max: 760px;
  --centre-w: 260px;  --centre-w-mobile: 160px;
  --core-glow: rgb(244 242 236 / 0.30);   /* v8: the nucleus glow, a soft near-white (was cool-white 0.20) */
  /* v6: interior voices (benchmarked on the centred hero) and the living orbit */
  --fvs-title: "wdth" 92, "wght" 420;     /* case H1: a project name, a little firmer than the hero sentence */
  --orbit-drift: 0.018;                   /* rad/s clockwise, only while nobody engages (documentation; mirrored in field.js) */
  --orbit-idle-ms: 5000;                  /* drift resumes after this much quiet */
  --far-stars-desktop: 1300; --far-stars-mobile: 560; --far-stars-case: 1100;   /* v7: tiered (most faint, ~1.5 % clearly bright) */
  /* v7: star hierarchy, selected formation > other formations > sky stars > distant dust (documentation; mirrored in field.js) */
  --star-anchor-per-formation: 14;   /* placed on each formation's own structure */
  --star-bright-share: 0.12;
  --orbit-path-exponent: 4;          /* superellipse: diagonals get room at enlarged sizes */
  --sky-tint: rgb(34 60 104 / 0.16); /* the cool depth layer, composited once */
  /* v8: the descent. Screened over near-black space; full strength = the level the type was measured against */
  --sky-violet-top: rgb(18 12 42);  --sky-violet-base: rgb(27 17 60);
  --sky-violet-glow: rgb(104 64 196 / 0.42); --sky-violet-side: rgb(76 46 156 / 0.24);
  --sky-night-top: rgb(4 8 24);     --sky-night-base: rgb(8 13 36);
  --sky-night-glow: rgb(54 42 128 / 0.10);   --sky-night-zenith: rgb(26 40 96 / 0.18);
  --sky-case-violet: 0.20; --sky-case-night: 0.62;  /* reading level on case pages (documentation; set in remix.js) */
  /* v8: the galaxy nucleus (documentation; mirrored in field.js): ~5 % of galaxy stars in a core of sigma 0.032 R,
     brightness, size and halo by radius, a slightly warm white; plus one compact composited glow */

  /* ---- Space & layout ---- */
  --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: 4.5rem; --s-9: 7rem;
  --margin: clamp(1rem, 0.4rem + 3vw, 3.5rem);
  --gutter: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
  --measure: 64ch;
  --max: 1320px;
  --radius-1: 4px; --radius-2: 10px;
  --target: 44px;

  /* ---- Motion ---- */
  --d-1: 120ms; --d-2: 220ms; --d-3: 380ms; --d-4: 700ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- Focus ---- */
  --focus: 2px solid var(--ion);
  --focus-offset: 3px;
}
@media (prefers-reduced-motion: reduce) { :root { --d-1: 0ms; --d-2: 0ms; --d-3: 0ms; --d-4: 0ms; } }
:root[data-motion="off"] { --d-1: 0ms; --d-2: 0ms; --d-3: 0ms; --d-4: 0ms; }