/* ============================================================
   M.O. SYSTEM — Shared design tokens
   Author: Maslov Oleksandr · Munich · 2026
   ============================================================ */

:root {
  /* ---------- COLOR / SUBSTRATE ----------
     Deep space substrate. Closer to graphite than blue.
     The signal does the talking. */
  --void:       #04060d;   /* page background */
  --space:      #07090f;   /* elevated background */
  --carbon:     #0d1018;   /* card / surface */
  --carbon-2:   #131724;   /* surface hover */
  --trace:      #1e2536;   /* PCB trace silver */
  --hairline:   #232a3a;   /* dividers */

  /* ---------- COLOR / TEXT ---------- */
  --bone:       #e6e8ee;   /* primary text */
  --ash:        #9aa3b3;   /* secondary text */
  --ghost:      #7a8499;   /* tertiary / meta - 5.39:1 on --void, WCAG AA */
  --shadow:     #3a4256;   /* disabled / faint */

  /* ---------- COLOR / SIGNAL ----------
     Signal cyan is the single accent that "speaks".
     Use sparingly — every appearance must mean something. */
  --signal:        #00f0c8;   /* primary signal — active, live, on */
  --signal-dim:    #00a88c;   /* dim / hover-trail */
  --signal-glow:   #00f0c855; /* glow / underline */
  --signal-ghost:  #00f0c818; /* tint surface */

  --pulse:         #ff5b3b;   /* warning / pulse / pressed */
  --pulse-dim:     #c2412a;
  --copper:        #c87340;   /* warm hardware accent */

  /* ---------- TYPOGRAPHY ----------
     Geist        — neutral, mechanical-feeling display + body
     Geist Mono   — technical / data / labels
     Instrument Serif Italic — editorial accent (numerals, pull-quotes)

     Only the italic cut of Instrument Serif is loaded. Every call site in
     the repo pairs --ff-serif with font-style: italic; the roman cut has
     no role and is deliberately absent from the font request. */
  --ff-display: "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ff-mono:    "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ff-serif:   "Instrument Serif", "Iowan Old Style", "Times New Roman", serif;

  /* ---- STATIC RAMP ----
     The 10 → 13 band carries uppercase mono metadata, HUD keys, captions
     and nav. 10px is the hard floor: nothing on the site renders smaller,
     and no interactive control renders below --fs-micro.

     Expressed in rem so the browser's own text-size setting scales them.
     16px root = 1rem; the comment on each line is the default rendering. */
  --fs-nano:    0.625rem;   /* 10px · micro label · HUD key · uppercase mono */
  --fs-micro:   0.6875rem;  /* 11px · small label · smallest interactive control */
  --fs-small:   0.75rem;    /* 12px · card sub · readout */
  --fs-meta:    0.8125rem;  /* 13px · meta · nav · caption */
  --fs-body:    1rem;       /* 16px */
  --fs-lead:    1.3125rem;  /* 21px */
  --fs-h4:      1.75rem;    /* 28px */
  --fs-h3:      2.625rem;   /* 42px */
  --fs-h2:      4rem;       /* 64px */

  /* ---- FLUID DISPLAY RAMP ----
     One ramp for every page. Replaces the former static --fs-h1 /
     --fs-display / --fs-hero (which no element ever rendered) and the 22
     bespoke clamps that the landing, the case-study pages, the project
     index and the design-system page had each invented separately.
     Display hierarchy is now editable in one place.

     Rungs with a -nowrap / -stack / -card suffix are pinned to a hard
     layout constraint and must be re-checked in-browser if retuned. */
  --fs-d1:  clamp(72px,  12vw, 200px);  /* page hero name */
  --fs-d2:  clamp(56px, 8.5vw, 144px);  /* section hero */
  --fs-d3:  clamp(40px, 5.8vw,  80px);  /* major section heading */
  --fs-d4:  clamp(29px, 3.4vw,  52px);  /* heading · metric value */
  --fs-d5:  clamp(21px, 2.5vw,  34px);  /* subheading · card name */
  --fs-d6:  clamp(19px, 2.2vw,  30px);  /* lede */
  --fs-d7:  clamp(14px, 1.15vw, 17px);  /* body lede */

  --fs-d1-nowrap: clamp(72px, 10vw, 168px);  /* fitted: work-reel title is nowrap */
  --fs-d2-stack:  clamp(36px, 4.9vw, 118px); /* fitted: origin multi-line statement */
  --fs-d4-node:   clamp(34px, 4.4vw,  52px); /* fitted: universe HUD panel, fixed padding */
  --fs-d5-card:   clamp(22px, 2.4vw,  30px); /* fitted: reel card fixed width */

  /* ---- LINE HEIGHT ----
     A leading scale rather than a set of one-off decimals. The site
     previously shipped 12 unitless values across the two bands; these eight
     rungs cover the same range with the largest snap under 0.05. */
  --lh-crush:   0.84;   /* oversized stacked display */
  --lh-flush:   0.88;   /* display headline */
  --lh-tight:   0.92;   /* display with descenders */
  --lh-solid:   0.96;   /* short heading */
  --lh-compact: 1.30;   /* dense multi-line label */
  --lh-mono:    1.45;   /* mono readout */
  --lh-text:    1.55;   /* body copy */
  --lh-loose:   1.70;   /* airy body · footnote */

  /* ---- TRACKING ----
     Tight through the display band, open through the uppercase mono band.
     Replaces 14 loose em values; largest snap is 0.02em, which is a fifth
     of a pixel at label size. */
  --tr-tightest: -0.045em;  /* largest display */
  --tr-tighter:  -0.035em;
  --tr-display:  -0.03em;
  --tr-head:     -0.02em;
  --tr-tight:    -0.01em;
  --tr-body:     -0.005em;
  --tr-mono:      0.01em;
  --tr-wide:      0.04em;   /* keycap legend · small caps */
  --tr-wider:     0.06em;
  --tr-caps:      0.12em;   /* uppercase mono label — the workhorse */
  --tr-caps-xl:   0.16em;
  --tr-widest:    0.24em;   /* spaced display caps */

  /* ---------- SPACING — pure Fibonacci scale ----------
     Every spacing decision picks from this scale. No off-grid values. */
  --s-1:   2px;
  --s-2:   3px;
  --s-3:   5px;
  --s-4:   8px;
  --s-5:   13px;
  --s-6:   21px;
  --s-7:   34px;
  --s-8:   55px;
  --s-9:   89px;
  --s-10:  144px;
  --s-11:  233px;
  --s-12:  377px;

  /* ---- WINDOW-EDGE GUTTERS ------------------------------------------
     Everything anchored to a viewport corner keys to these three, so the
     shell header, the section markers, the HUDs, the waypoint rail and
     the statement blocks all sit on one column instead of five. The
     header's own padding is the reference: it is the one piece of chrome
     present on every route.

     Phone breakpoints keep their own tighter overrides — a 34px gutter
     each side of a 375px screen is a different composition problem. */
  --gutter:     var(--s-7);   /* 34px — left / right window inset          */
  --gutter-top: var(--s-9);   /* 89px — first row clear of the fixed shell */
  --gutter-bot: var(--s-8);   /* 55px — bottom window inset                */

  /* radius — tiny only. We're a system, not a candy shop. */
  --r-1:   2px;
  --r-2:   4px;
  --r-3:   8px;
  --r-pill: 999px;

  /* ---------- MOTION ----------
     Treat durations as signal-propagation times. */
  --d-instant: 80ms;    /* state flicker */
  --d-tap:     140ms;   /* click feedback */
  --d-fast:    220ms;   /* hover */
  --d-base:    380ms;   /* default transition */
  --d-slow:    620ms;   /* element reveal */
  --d-cinema:  1000ms;  /* hero / camera moves */
  --d-fade:    2200ms;  /* ambient drift */

  /* Easing — RC-curve flavored. */
  --e-out:     cubic-bezier(0.16, 1, 0.3, 1);     /* expo-out, default reveal */
  --e-in-out:  cubic-bezier(0.83, 0, 0.17, 1);    /* dramatic camera */
  --e-snap:    cubic-bezier(0.34, 1.56, 0.64, 1); /* signal snap */
  --e-linear:  linear;

  /* ---------- ELEVATION ---------- */
  --glow-sm:  0 0 0 1px var(--signal-glow);
  --glow-md:  0 0 24px -8px var(--signal), 0 0 0 1px var(--signal-glow);
  --shade-1:  0 1px 0 0 var(--hairline);
  --shade-2:  0 8px 24px -12px rgba(0,0,0,0.6);

  /* ---------- LAYOUT ----------
     Fibonacci-scaled max-widths. */
  --w-reading: 610px;   /* reading width — canvas / phi² */
  --w-canvas:  1597px;  /* full layout */
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--void);
  color: var(--bone);
  font-family: var(--ff-display);
  font-size: var(--fs-body);
  line-height: var(--lh-text);
  letter-spacing: var(--tr-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "ss02", "cv11";
  min-height: 100vh;
  overflow-x: clip;
}

body {
  /* faint dot-grid substrate at Fibonacci spacing */
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.018) 0.5px, transparent 1px);
  background-size: 21px 21px;
  background-position: 0 0;
}

::selection {
  background: var(--signal);
  color: var(--void);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

/* hide native cursor when custom cursor is active */
html.custom-cursor, html.custom-cursor * { cursor: none !important; }

/* ============================================================
   TYPOGRAPHIC PRIMITIVES
   ============================================================ */
.t-mono     { font-family: var(--ff-mono); letter-spacing: var(--tr-mono); }
.t-serif    { font-family: var(--ff-serif); font-style: italic; }
.t-caps {
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  font-size: var(--fs-meta);
  font-family: var(--ff-mono);
  font-weight: 500;
}

.t-meta {
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  color: var(--ghost);
  letter-spacing: var(--tr-mono);
}

/* Signal underline used on links */
.t-link {
  display: inline;
  background-image: linear-gradient(var(--signal), var(--signal));
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
  transition: background-size var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
  color: var(--bone);
}
.t-link:hover { color: var(--signal); background-size: 100% 2px; }

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.canvas {
  width: 100%;
  max-width: var(--w-canvas);
  margin: 0 auto;
  padding: 0 var(--s-7);
}

/* ============================================================
   SCREEN-READER
   ============================================================ */