/* ============================================================
   TOKENS — the entire visual system lives here.
   Change a value here and it propagates everywhere.

   Direction: "technical drawing set brought to life."
   Ground is cool pencil-graphite, panels read as translucent
   drafting film (vellum), and there are exactly two accents:
   cyanotype blue for structure, oxide red for annotation only.
   ============================================================ */

:root {
  color-scheme: dark;

  /* ---- Ground -------------------------------------------------
     Cool graphite rather than pure black. Pure #000 kills the
     sense of a physical drafting surface and crushes the grain. */
  --graphite-900: #12141a;
  --graphite-850: #161920;
  --graphite-800: #1a1d25;
  --graphite-700: #23262f;
  --graphite-600: #2e323d;

  /* ---- Drafting film ----------------------------------------
     Panels are milky translucent, not glassy. Low alpha white
     with a warm-neutral tint so it reads as vellum over
     graphite instead of frosted glass. */
  --vellum-01: rgba(233, 238, 246, 0.035);
  --vellum-02: rgba(233, 238, 246, 0.055);
  --vellum-03: rgba(233, 238, 246, 0.085);
  --vellum-line: rgba(233, 238, 246, 0.11);
  --vellum-line-strong: rgba(233, 238, 246, 0.2);

  /* ---- Ink --------------------------------------------------- */
  --chalk: #e9eef6;          /* primary text — white pencil on graphite */
  --chalk-dim: #c3cad6;
  --slate-500: #8a93a6;      /* secondary text */
  --slate-600: #6b7385;      /* tertiary / captions */
  --slate-700: #4d5464;      /* disabled, faint rules */

  /* ---- Accent: cyanotype ------------------------------------
     Blueprint chemistry. Carries structure: dimension lines,
     active states, links, focus rings. */
  --cyanotype: #4c7dff;
  --cyanotype-bright: #7aa0ff;
  --cyanotype-dim: #2f4fa8;
  --cyanotype-wash: rgba(76, 125, 255, 0.12);
  --cyanotype-wash-soft: rgba(76, 125, 255, 0.06);
  --cyanotype-glow: rgba(76, 125, 255, 0.35);

  /* ---- Accent: oxide ----------------------------------------
     A drafter's red correction pencil. RESERVED for annotation
     and revision marks. Never use for general emphasis — its
     scarcity is what makes it mean something. */
  --oxide: #c9502f;
  --oxide-bright: #e4693f;
  --oxide-wash: rgba(201, 80, 47, 0.13);

  /* ---- Type -------------------------------------------------
     Display: Archivo Expanded — wide industrial grotesk, used
       uppercase and only for plate titles and the name.
     Body: IBM Plex Sans — engineered lineage, reads long-form.
     Data: IBM Plex Mono — every label, date, dimension, part no.
     Deliberately not Inter/Satoshi, which are the default pair. */
  --font-display: "Archivo Expanded", "Archivo", "Arial Black",
                  system-ui, sans-serif;
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Fluid type scale. Ratio ~1.26 at the small end, opening up
     to ~1.33 at display sizes so headlines get more authority. */
  --t-micro: 0.6875rem;                              /* 11px — part numbers */
  --t-caption: 0.75rem;                              /* 12px — mono labels */
  --t-small: 0.8125rem;                              /* 13px */
  --t-body: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --t-body-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --t-h4: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --t-h3: clamp(1.375rem, 1.2rem + 0.75vw, 1.875rem);
  --t-h2: clamp(1.875rem, 1.5rem + 1.9vw, 3.25rem);
  --t-h1: clamp(2.75rem, 1.7rem + 5.2vw, 6.5rem);

  --lh-tight: 0.94;
  --lh-snug: 1.14;
  --lh-body: 1.62;
  --lh-mono: 1.45;

  /* Mono labels are always tracked out — this is the single
     most characteristic typographic move in drafting. */
  --track-mono: 0.14em;
  --track-mono-wide: 0.22em;
  --track-display: -0.025em;

  /* ---- Space ------------------------------------------------
     4px base, doubling-ish. Named by size not purpose so it
     stays predictable. */
  --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;

  /* Sheet rhythm. Sections read their padding from these
     variables and never from competing selectors — this is how
     we avoid the classic padding specificity war. */
  --sheet-pad-y: clamp(4.5rem, 9vh, 8.5rem);
  --sheet-pad-x: clamp(1.25rem, 4vw, 4rem);
  --sheet-max: 1240px;

  /* ---- Structure -------------------------------------------- */
  --rail-w: 84px;            /* title-block rail, desktop */
  --radius-sm: 2px;          /* drafting = near-square corners */
  --radius: 4px;
  --radius-lg: 8px;
  --hair: 1px;

  /* ---- Elevation -------------------------------------------
     Shadows are cast, not glowed: tight, dark, offset down. */
  --lift-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --lift-2: 0 4px 16px -4px rgba(0, 0, 0, 0.5);
  --lift-3: 0 18px 48px -12px rgba(0, 0, 0, 0.66);
  --lift-4: 0 40px 90px -24px rgba(0, 0, 0, 0.78);

  /* ---- Motion ----------------------------------------------
     One expressive curve for entrances, one calm curve for
     state changes, one spring-ish for interactive feedback. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 140ms;
  --dur: 260ms;
  --dur-slow: 520ms;
  --dur-reveal: 880ms;

  /* ---- Layers ---------------------------------------------- */
  --z-atmosphere: 0;
  --z-content: 10;
  --z-rail: 40;
  --z-nav: 50;
  --z-palette: 90;
  --z-cursor: 100;
}

/* Anyone who has asked their OS to calm things down gets a
   still page: no ambient shader, no parallax, no orbit drift.
   Content and layout are identical — only motion is removed. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
    --dur-reveal: 1ms;
  }
}