/*
 * Magic16 — design tokens: Windows 98 × Geo97 × LittleBigPlanet.
 *
 * Grey Win98 3D chrome (the 4-colour double bevel is the identity), painted with
 * a neon cyan/magenta/lime palette (from the user's FVWM "PixelShell" + windows93),
 * with handcrafted LBP materials layered on. HARD RULE (from Geo97): every
 * interactive object is a DIMENSIONAL physical thing — highlight + shadow + bevel,
 * NEVER flat.
 */

/* The responsive DESIGN SCALE (set by ui-scale.js from the viewport). Registered so it can
   transition smoothly when the layout snaps between sizes (editor Tablet→Desktop, maximise). */
@property --m16-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}
/* Enabled only during a DISCRETE size change (shell-resize.js toggles it) so the whole UI
   scale settles as one cohesive motion; a live drag tracks instantly (no class → no transition). */
:root.m16-anim-scale { transition: --m16-scale 260ms var(--ease, cubic-bezier(.22,.8,.25,1)); }

:root {
  --m16-scale: 1;           /* responsive design multiplier (1.0 = compact reference) */
  /* ---- Win98 system chrome (grey) ---- */
  --face: #c0c0c0;          /* button/window face grey */
  --face-lt: #d4d0c8;       /* hover face */
  --face-dk: #a8a8a8;
  --hilite: #ffffff;        /* bevel top-left highlight */
  --light: #dfdfdf;         /* inner light */
  --shadow: #808080;        /* bevel inner shadow */
  --dkshadow: #404040;      /* bevel outer dark */
  --outline: #000000;
  --ink: #000000;
  --ink-soft: #303030;
  --disabled: #7b7b7b;
  --well: #ffffff;          /* sunken content well */

  /* ---- Neon accents (FVWM PixelShell + windows93 = "keep the color scheme") ---- */
  --cyan: #00c8d8;   --cyan-lt: #40e8f8;  --cyan-dk: #0088a0;  --cyan-hot: #00ffff;
  --mag: #d03890;    --mag-lt: #f058b0;   --mag-dk: #a01868;   --mag-hot: #ff00ff;
  --lime: #c3ff00;   --green: #40ff40;    --green-dk: #1f9c34;
  --amber: #f08a16;  --amber-lt: #ffc24a;
  --violet: #7a3fcc; --violet-lt: #b07bff;
  /* Win98 selection blue. DARKENED from #0080cb: white 14px text on that was ~4.27:1,
     below AA, and it is the ACTIVE NAV ITEM — the one thing on the page that tells you
     where you are (audit E005). #00679f is the same hue at ~6.1:1. */
  --blue: #0b5fd6;   --blue-lt: #3a9bff;  --blue-sel: #00679f;

  /* ---- Titlebars: active = magenta→cyan (windows93 --ActiveTitle) ---- */
  --title-active: linear-gradient(90deg, var(--mag-hot), var(--cyan-hot));
  --title-inactive: linear-gradient(90deg, #700070, #007070);
  --title-text: #ffffff;

  /* ---- Semantic accents ---- */
  --accent: var(--cyan);
  --accent2: var(--mag);
  --link: #0000cc;
  --link-visited: #660099;

  /* k10k social lozenge fills. These WERE hardcoded (#ff2296 / #21c7ea) in
     components.css, which is why switching theme left them unchanged — "most visual
     identity is hardcoded and ignores themes" (audit E001). They are tokens now, so a
     theme owns them like everything else. */
  --loz-1: #21c7ea;  --loz-1-ink: #05303f;
  --loz-2: #ff2296;  --loz-2-ink: #ffffff;

  /* ---- Metrics (Win98 = tight, square, integer) — chrome heights + larger paddings scale
     with the design scale; small paddings + border widths stay crisp integer CSS px. ---- */
  --title-h: calc(28px * var(--m16-scale));
  --menubar-h: calc(32px * var(--m16-scale));
  /* Chrome metrics scale with the responsive design scale like everything else.
     These were fixed px, so at the 1.45 scale cap on a 4K display the taskbar, start
     button, caption buttons and title icon stayed tiny while the rest of the UI grew
     (audit E007). Small paddings + border widths stay crisp integer px on purpose. */
  --taskbar-h: calc(34px * var(--m16-scale));
  --startbtn-h: calc(26px * var(--m16-scale));
  --capbtn-w: calc(22px * var(--m16-scale));
  --capbtn-h: calc(20px * var(--m16-scale));
  --title-ico: calc(16px * var(--m16-scale));
  --nav-ico: calc(15px * var(--m16-scale));
  --radius: 2px;          /* Win98 barely rounds */
  --radius-pill: 3px;
  --pad-1: 2px; --pad-2: 4px; --pad-3: 6px; --pad-4: calc(8px * var(--m16-scale));
  --pad-5: calc(12px * var(--m16-scale)); --pad-6: calc(16px * var(--m16-scale)); --pad-8: calc(24px * var(--m16-scale));

  /* ---- Shadows (hard-edged; a few soft for LBP stickers) ---- */
  --shadow-drop: 2px 2px 4px rgba(0,0,0,0.4);
  --shadow-win: 3px 3px 8px rgba(0,0,0,0.55);
  --shadow-soft: 0 6px 18px rgba(0,0,0,0.4);
  --glow-cyan: 0 0 10px rgba(0,200,216,0.6);
  --glow-mag: 0 0 10px rgba(208,56,144,0.6);

  /* ---- Type ----
   * MS Sans (pixel) for CHROME only — crisp at 11/12px. Body COPY uses a
   * legible vector face at a comfortable size (the bitmap font is too small to
   * read in paragraphs). */
  /* Crisp VECTOR fonts (Tahoma/Verdana = the real Win98 UI faces) — readable at
   * any size, no bitmap aliasing. Pixel font reserved for big brand wordmarks. */
  --font-ui: "Tahoma", "Verdana", "Segoe UI", system-ui, "DejaVu Sans", sans-serif;
  --font-body: "Verdana", "Geneva", "DejaVu Sans", "Tahoma", system-ui, sans-serif;
  --font-pixel: "M16 Pixel", "Tahoma", sans-serif;
  --font-mono: "Lucida Console", "Consolas", monospace;
  /* Type scales with the design scale (with accessible minimums via max()/floors). */
  --fs-ui: calc(14px * var(--m16-scale));          /* chrome (titlebar/menu/buttons) */
  --fs-sm: calc(13px * var(--m16-scale));
  --fs-micro: max(12px, calc(12px * var(--m16-scale)));
  --fs-body: max(14px, calc(16px * var(--m16-scale)));   /* readable paragraph copy, never < 14 */
  /* The wordmark headings (.brandmark "Magic16", .slamm-title "Slamm1nSalm0n" — the only --h1
     users). 11vw reaches the 48px cap from ~440px up, so desktop is unchanged; below that it
     still tracks the width instead of collapsing to the floor. At 4.4vw a phone sat on 30px×0.9
     = 27px — barely 2× the 14px body copy, smaller than a video title — where desktop shows 3×.
     Widest wordmark is ~6.9 ems, so 11vw stays well inside the panel at any phone width. */
  --h1: calc(clamp(30px, 11vw, 48px) * var(--m16-scale));
  --h2: calc(clamp(20px, 2.4vw, 30px) * var(--m16-scale));
  --lede: calc(clamp(15px, 1rem + 0.3vw, 19px) * var(--m16-scale));

  /* ---- Textures (handcrafted materials) ---- */
  --tex-chess: url("../../public/textures/chess-wood.png");
  --tex-water: url("../../public/textures/water.png");
  --tex-whitetile: url("../../public/textures/white-tile.png");
  --tex-books: url("../../public/textures/bookshelf.png");
  --tex-leaf: url("../../public/textures/salvia-black.jpg");
  --tex-brick: url("../../public/textures/brick.gif");
  --tex-circuit: url("../../public/textures/circuit.gif");
  --tex-felt: url("../../public/textures/felt-blue.gif");
  --tex-marble: url("../../public/textures/marble.jpg");
  --tex-starfield: url("../../public/textures/stars-bg.gif");   /* Betty's "stars 1" animated field */

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur: 260ms;
  --page-dur: 300ms;
}

/* ---- DARK MODE ------------------------------------------------------------------
 * A REAL dark palette, not scaffolding. index.html has always run a no-flash
 * `data-mode` bootstrap (?mode → localStorage → prefers-color-scheme) and shipped
 * theme-color metas — but NO stylesheet defined a single dark colour, and main.js
 * then unconditionally forced `data-mode="light"`, so the site was always light and
 * the whole mechanism was a lie (audit E002). The mandate's choice was: implement a
 * real dark palette, or delete the dead plumbing. This is the palette.
 *
 * It re-tints the Win98 CHROME (a dark-grey system look — which is period-correct;
 * Win98 shipped a "High Contrast Black" scheme) and lifts the neon accents so they
 * still read against it. The brand identity — the magenta→cyan titlebar, the k10k
 * lozenges, the character colours — is deliberately UNCHANGED: dark mode is a
 * lighting condition, not a different site.
 */
:root[data-mode="dark"] {
  --face: #35383d;          /* window/button face */
  --face-lt: #43474d;       /* hover face */
  --face-dk: #26282c;
  --hilite: #6e747d;        /* bevel top-left highlight (never pure white in the dark) */
  --light: #4b5057;
  --shadow: #1b1d20;        /* bevel inner shadow */
  --dkshadow: #0a0b0d;
  --outline: #000000;
  --ink: #e8ecf2;
  --ink-soft: #b6bdc7;
  --disabled: #767b83;
  --well: #1c1e22;          /* sunken content well */

  /* Accents lift slightly: the same hues, enough luminance to survive a dark face. */
  --cyan: #2ad9ea;   --cyan-lt: #7ff0fb;  --cyan-dk: #0a93a8;
  --mag: #ef5bb0;    --mag-lt: #ff8ccd;   --mag-dk: #b32b78;
  --lime: #d4ff4a;   --green: #62ff77;    --green-dk: #2fbf49;
  --amber: #ffab3d;  --amber-lt: #ffd07a;
  --violet: #a06bff; --violet-lt: #c9a6ff;
  --blue: #4b8dff;   --blue-lt: #7fb4ff;
  /* Selection blue is DARKENED in light mode for contrast (see below); in the dark it
     can stay saturated because the text on it is already light. */
  --blue-sel: #1467a8;

  --title-inactive: linear-gradient(90deg, #3a1040, #0d3a44);
  --link: #7fb4ff;
  --link-visited: #c9a6ff;

  --shadow-drop: 2px 2px 4px rgba(0,0,0,0.65);
  --shadow-win: 3px 3px 10px rgba(0,0,0,0.75);
  --shadow-soft: 0 6px 18px rgba(0,0,0,0.6);
}