/* Compatibility tokens for the two pages that keep their own component styles (the 3D skill page and the
   templates gallery). The old names point at glass values; the glass tokens load after this file and win
   where a name is shared. */
/* =============================================================================
   Stryx Skills: the one token file (2026-10-14, the earlier night look; now the glass world).
   The night of the main site, at the meadow beside the owl's forest: ninety-four small lights that each glow alone
   and fall into one shared pulse. Every literal colour of the site lives here and nowhere else.

   Role names are kept from the earlier light site so every stylesheet follows without a rewrite:
     --color-paper  = the ground of the page (now night)      --color-ink = the strongest text (now moon paper)
   Contrast, measured on the ground #070a1c: ink 17.1, ink-soft 12.2, ink-mute 8.0, every group tone 10.7 to 14.5;
   on the plate's brightest mid tone #1e2452: ink-mute 6.0, the group tones 8.0 to 10.9.
   ========================================================================== */

/* type: Walbaum Display (headlines) + Neue Haas Grotesk Display Pro (text), from the owner's font set
   (brain fonts find / show, quality 5, certain), cut to Latin as WOFF2. The fallback faces are sized to the files. */
:root {
  color-scheme: dark;

  /* ground and text */
  --color-paper: #070a1c;                       /* the night ground */
  --color-paper-deep: #04060f;                  /* the deepest night, under the grass */
  --color-ink: #f3efe2;                         /* moon paper: headlines, strong text */
  --color-ink-soft: #c6cbe0;                    /* body text */
  --color-ink-mute: #9da4c2;                    /* small notes (7.0 to 1 on the ground) */
  --color-line: rgba(198, 205, 240, 0.14);
  --color-line-strong: rgba(198, 205, 240, 0.30);
  --color-control-line: #7c84a8;                /* the edge of a ghost button or a field: a UI part, 3 to 1 or more */

  /* the meadow plate and the sky before it loads */
  --night-zenith: #090b26;
  --night-mid: #10173e;
  --night-horizon: #1e2452;
  --night-violet: #2b1f52;
  --meadow-plate: none;                         /* set by the plate rules in site.css when the file exists */

  /* the old accent light: yellow-green with a warm core */
  --glow: #d6f36a;
  --glow-core: #fff7cf;
  --glow-soft: rgba(214, 243, 106, 0.18);
  --glow-wash: rgba(214, 243, 106, 0.10);

  /* glass: night glass, blurred */
  --glass-fill: rgba(9, 12, 32, 0.62);
  --glass-fill-strong: rgba(9, 12, 32, 0.90);
  --glass-line: rgba(198, 205, 240, 0.13);
  --glass-shine: rgba(255, 255, 255, 0.05);
  --glass-shadow: rgba(0, 0, 0, 0.55);

  /* group tones that are safe as text on the ground and on the glass (10.7 to 14.5 to 1) */
  --color-rust: #f2dd8f;                        /* the accent for links and italics: warm gold */
  --color-ember: #ffb796;                       /* plan */
  --color-teal: #86dcee;                        /* quality */
  --color-plum: #d4b0ff;                        /* design */
  --color-blue: #a7bfff;                        /* languages */
  --color-green: #95e6bd;                       /* web */
  --color-rose: #ffaccc;                        /* writing */
  --color-amber: #ffd684;                       /* workflow */
  --color-slate: #cbc6e6;                       /* modes */

  /* bright marks: the light of each group's swarm, dots, bars. Never small text. */
  --mark-rust: #ff8f5e;
  --mark-teal: #3fd0ea;
  --mark-plum: #b483ff;
  --mark-blue: #7198ff;
  --mark-green: #49d895;
  --mark-rose: #ff74ad;
  --mark-amber: #f6be3e;
  --mark-slate: #a29bd0;

  /* the dark block (commands) */
  --code-bg: #03050f;
  --code-ink: #eef0f8;
  --code-label: #a9b0cc;
  --code-prompt: #d6f36a;
  --code-arg: #ffd684;
  --code-url: #a7cbff;

  --gradient-aurora: linear-gradient(110deg, #fff0b0 0%, #d6f36a 48%, #8fe0c8 100%);
  --gradient-brand: linear-gradient(100deg, #4191E1 0%, #41E1B5 55%, #22D3EE 100%); /* the house gradient: only on the one install button */
  --color-on-brand: #04131a;                    /* near-black ink on the brand gradient (8.2 to 1 at its darkest stop) */

  /* type */
  --font-serif: "Didot Glass", Didot, Georgia, serif;
  --font-sans: "Optima Glass", Optima, Candara, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --t-micro: 0.75rem;
  --t-small: 0.875rem;
  --t-body: 1rem;
  --t-title: 1.3125rem;
  --t-lede: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --t-h3: clamp(1.5rem, 1.2rem + 0.9vw, 2.125rem);
  --t-h2: clamp(2.25rem, 1.3rem + 2.8vw, 4.25rem);
  --t-display: clamp(3.25rem, 1.6rem + 6vw, 8.5rem);

  /* space */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --gap: 1.5rem;
  --section: clamp(4rem, 7vw, 7rem);
  --radius: 1.25rem;
  --radius-inner: 0.875rem;

  /* motion: UI time, and scene-length time */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-scene: 900ms;

  --topnav-h: 64px;

  /* the halo: a ring of night around a letter, seen only when light passes behind it */
  --p: var(--color-paper);
  --halo:
    0.02em 0 0 var(--p), -0.02em 0 0 var(--p), 0 0.02em 0 var(--p), 0 -0.02em 0 var(--p),
    0 0 0.12em var(--p), 0 0 0.3em var(--p);
  --halo-small:
    1px 0 0 var(--p), -1px 0 0 var(--p), 0 1px 0 var(--p), 0 -1px 0 var(--p),
    0 0 4px var(--p), 0 0 10px var(--p);
}

/* the shared header (topnav.js) takes the night through its own custom properties */
html .stryx-topnav.is-dark {
  --tn-bg: rgba(6, 8, 22, 0.74); --tn-panel: rgba(7, 10, 28, 0.97); --tn-ink: #f3efe2; --tn-line: rgba(198, 205, 240, 0.13);
  --tn-accent: #d6f36a; --tn-accent-wash: rgba(214, 243, 106, 0.12); --tn-pupil: #070a1c; --tn-ring: #f3efe2; --tn-shadow: rgba(0, 0, 0, 0.6);
}