/* ============================================================================
   TOKENS.CSS — THE CONTROL PANEL
   ----------------------------------------------------------------------------
   Everything visual is a dial in this file. Change a value here and it updates
   everywhere. You should almost never need to touch main.css.

   Quick wins:
   · Fonts ................... --font-display / --font-body / --font-mono
   · Page background ......... --bg
   · Corner roundness ........ --radius   (0px = hard, 12px = soft)
   · Overall density ......... --space-scale
   · Animation speed ......... --dur-mid
   · Blueprint grid on/off ... --grid-opacity  (0 = off)
   · Rail width .............. --rail-w
   ========================================================================= */

/* ---------------------------------------------------------------- FONTS --- */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  --font-display: 'Archivo', system-ui, sans-serif;            /* big headings */
  --font-body:    'Inter', system-ui, sans-serif;              /* prose */
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;   /* all UI chrome */

  /* ------------------------------------------------------- TYPE SCALE --- */
  --fs-display: clamp(2.5rem, 6.5vw, 5.5rem);
  --fs-h1:      clamp(1.85rem, 3.6vw, 2.9rem);
  --fs-h2:      clamp(1.4rem, 2.2vw, 1.95rem);
  --fs-h3:      1.15rem;
  --fs-lede:    clamp(1rem, 1.25vw, 1.15rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-label:   0.75rem;   /* 12px floor — never smaller */

  --lh-tight: 0.92;
  --lh-snug:  1.15;
  --lh-body:  1.65;
  --track-label: 0.16em;
  --track-tight: -0.03em;

  /* ----------------------------------------------------- SPACE SCALE --- */
  --space-scale: 1;         /* 0.85 = denser, 1.15 = airier */
  --space-1: calc(0.25rem * var(--space-scale));
  --space-2: calc(0.5rem  * var(--space-scale));
  --space-3: calc(0.75rem * var(--space-scale));
  --space-4: calc(1rem    * var(--space-scale));
  --space-5: calc(1.5rem  * var(--space-scale));
  --space-6: calc(2rem    * var(--space-scale));
  --space-7: calc(3rem    * var(--space-scale));
  --space-8: calc(4.5rem  * var(--space-scale));
  --section-y: clamp(2.5rem, 5vw, 4.5rem);

  --rail-w:     250px;     /* left navigation rail */
  --max-w:      1180px;    /* content column */
  --max-w-text: 70ch;      /* reading width */
  --gutter:     clamp(1.25rem, 3.5vw, 3rem);

  /* ---------------------------------------------------------- SHAPE --- */
  --radius:    3px;        /* deliberately hard-edged — this is an instrument */
  --radius-sm: 2px;
  --hairline:  1px solid var(--line);

  /* -------------------------------------------------------- MOTION --- */
  --dur-fast: 120ms;
  --dur-mid:  220ms;
  --dur-slow: 560ms;
  --ease:      cubic-bezier(0.2, 0.9, 0.25, 1);
  --ease-back: cubic-bezier(0.34, 1.5, 0.64, 1);

  /* -------------------------------------------------------- TEXTURE --- */
  --grid-opacity: 0.05;
  --grid-size: 38px;
  --noise-opacity: 0.028;

  /* -------------------------------------------------- SCROLL SCENES --- */
  --scene-h: 240vh;        /* how much scroll the pinned hero animation gets */
  --scene-h-mobile: 170vh;
}

/* =========================================================================
   THEME
   Dark only, on purpose — there is no light variant to switch to. The
   interface itself is deliberately monochrome; all colour comes from the
   machine accents below, so a page always tells you which machine you are on.
   ========================================================================= */
:root {
  color-scheme: dark;

  --bg:        #08090A;
  --bg-alt:    #0B0D0E;
  --surface:   #0F1113;
  --surface-2: #15181A;
  --line:      rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.20);

  --text:      #E9EDEF;
  --text-soft: #99A3A7;
  --text-mute: #7A8589;   /* light enough to clear 4.5:1 on --surface-2 too */

  --invert-bg: #E9EDEF;   /* solid buttons: light block, dark text */
  --invert-fg: #08090A;

  /* Warning colours. Deliberately NOT machine accents — danger should read the
     same on every page. --caution is the hazard-stripe amber. */
  --danger:  #FF3F5F;
  --caution: #F5C518;
  --caution-dark: #0A0A0A;
  --safe:    #23DFC9;

  --grid-color: #FFFFFF;
  --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.6);
  --shadow-2: 0 24px 60px -30px rgba(0, 0, 0, 0.95);
}

/* =========================================================================
   MACHINE ACCENTS
   One colour per machine. Set `accent: 'ember'` on a machine in content.js and
   its whole page — heading rules, scene animation, list markers — retints.
   Add a new machine colour by adding a block here.
   ========================================================================= */
[data-accent='ember']  { --hue: #FF7A1A; --hue-2: #FFB067; --hue-ink: #1F0900; --hue-tint: rgba(255, 122, 26, 0.13); }
[data-accent='cyan']   { --hue: #23DFC9; --hue-2: #8BF3E6; --hue-ink: #002420; --hue-tint: rgba(35, 223, 201, 0.13); }
[data-accent='crimson']{ --hue: #FF3F5F; --hue-2: #FF8B9F; --hue-ink: #2A0209; --hue-tint: rgba(255, 63, 95, 0.13); }
[data-accent='violet'] { --hue: #A78BFA; --hue-2: #CFC0FD; --hue-ink: #16062E; --hue-tint: rgba(167, 139, 250, 0.13); }
[data-accent='amber']  { --hue: #F5C518; --hue-2: #FBE38A; --hue-ink: #201800; --hue-tint: rgba(245, 197, 24, 0.13); }
[data-accent='lime']   { --hue: #A3E635; --hue-2: #CDF391; --hue-ink: #12200A; --hue-tint: rgba(163, 230, 53, 0.13); }

/* Neutral fallback so components using --hue work outside a machine context */
:root { --hue: var(--text); --hue-2: var(--text-soft); --hue-ink: var(--bg); --hue-tint: rgba(255, 255, 255, 0.06); }