/* ✧･ﾟ: *✧･ﾟ:*✧･ﾟ: *✧･ﾟ:*
  _               _        
 | |__    _   _  | | __  __
 | '_ \  | | | | | | \ \/ /
 | |_) | | |_| | | |  >  < 
 |_.__/   \__, | |_| /_/\_\
          |___/
*:･ﾟ✧*:･ﾟ✧*:･ﾟ✧*:･ﾟ✧ */ 
/* ᑲყᥣx tokens */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {

  /* Two palettes used to live here: a legacy set (--midnight, --neonCyan,
     skin/hair ramps, --success/--warning/--info) and the bylx-* set below.
     18 of the 19 legacy tokens were dead and the file could not say which
     palette was real. Only --danger survived, in .form-status. */
  /* Both of these are read on the paper surfaces (.form-status sits on the
     modal's #f7f2ff). The brand cyan and pink themselves land at 2.17:1 and
     2.65:1 there — these are their legible counterparts, 5.34:1 and 6.74:1. */
  --danger: #a81049;
  --bylx-cyan-deep: #106f7a;

  --bylx-bg: #09051b;
  --bylx-bg-ink: #1d1640;
  --bylx-pink: #ff5dbb;
  --bylx-cyan: #59f3ff;
  --bylx-purple: #5d3fd3;
  --bylx-text: #f7f2ff;
  --bylx-muted: #d8d0ff;
  --bylx-paper: #fff8ff;

  --bylx-pink-ink: #c33a8e;
  --bylx-pink-glow: rgba(255, 93, 187, 0.42);
  --bylx-cyan-ink: #2bb8c8;
  --bylx-cyan-glow: rgba(89, 243, 255, 0.42);
  --bylx-purple-ink: #2a1c84;
  --bylx-overlay: rgba(9, 5, 27, 0.78);
  --bylx-overlay-strong: rgba(9, 5, 27, 0.88);

  --bg: var(--bylx-bg);
  --pink: var(--bylx-pink);
  --cyan: var(--bylx-cyan);
  --purple: var(--bylx-purple);
  --text: var(--bylx-text);
  --muted: var(--bylx-muted);
  --paper: var(--bylx-paper);

  /* ---------- Semantic layer (from the design system) ----------
     Roles, not colours. Say what a thing IS, and the palette can move
     underneath without touching every component. */
  --fg1: var(--bylx-text);      /* primary text on dark */
  --fg2: var(--bylx-muted);     /* secondary text on dark */
  --fg-ink: var(--bylx-bg);     /* text on light surfaces */
  --bg1: var(--bylx-bg);
  --bg2: var(--bylx-bg-ink);
  --bg-paper: var(--bylx-paper);
  --accent: var(--bylx-pink);
  --accent-2: var(--bylx-cyan);
  --border: var(--bylx-cyan);
  --border-ink: var(--bylx-bg);
  --link: var(--bylx-cyan);

  --font-pixel: "Pixelify Sans", system-ui, sans-serif;
  --font-ui: "Press Start 2P", monospace;
  --font-mono: "Press Start 2P", ui-monospace, monospace;

  /* ---------- Type scale ----------
     The kit named the scale but froze it in rem; the site made it fluid but
     re-invented a clamp() in every component. This is the crossing of the
     two: named AND fluid. Min values are the kit's mobile-safe floors, max
     values are the kit's original rem sizes. */
  --fs-eyebrow: clamp(0.75rem, 0.9vw, 0.8125rem);
  --fs-caption: clamp(0.8125rem, 1vw, 0.875rem);
  --fs-body:    clamp(1rem, 1.15vw, 1.125rem);

  /* ---------- Label scale ----------
     Press Start 2P is a label face, not a text face: every glyph fills its em
     box, so at one font-size it reads about 1.5x the width and weight of
     Pixelify Sans. That is exactly why it kept being set at 7-9px — small
     enough to fit its box, too small to read. A sweep on 2026-09-25 found 33
     declarations under 12px and all 33 were this face.
     These are the only two sizes it is allowed at, and 12px is the floor.
     Anything that is a sentence rather than a label belongs in --font-pixel. */
  --fs-label:    0.75rem;    /* 12px — LIVE, All, Next.js, a CV link */
  --fs-label-lg: 0.8125rem;  /* 13px — eyebrows and section kickers */
  --fs-body-lg: clamp(0.95rem, 1.25vw, 1.2rem);
  --fs-h3:      clamp(1.15rem, 2vw, 1.6rem);
  --fs-h2:      clamp(1.5rem, 3.4vw, 2.4rem);
  --fs-h1:      clamp(2rem, 5.5vw, 3.4rem);
  --fs-display: clamp(2.4rem, 7vw, 5rem);

  --lh-tight: 0.96;
  --lh-snug:  1.08;
  /* The kit's 1.16 is right for a 2-line headline and punishing for a whole
     case study, which is what --lh-prose is for. */
  --lh-body:  1.16;
  --lh-prose: 1.38;
  --lh-loose: 1.55;

  --radius-0: 0;         /* pixel boxes have NO radius */
  --radius-pill: 999px;  /* only the dial */

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --stroke-1: 2px;
  --stroke-2: 4px;
  --stroke-3: 7px;
  /* ---------- Chunk shadow ----------
     The hard offset shadow was pink, and it is on almost every box on the
     site: cards, panels, buttons, the lightbox, the CV links. Paired with the
     cyan borders it put both brand colours on every element, which left
     nothing for a call to action to be louder than (2026-09-25).
     The shadow is now purple — it is a shadow, and purple is already the
     scene's own colour — and pink is reserved for CTA fills and focus rings.
     This one token is the lever: set it back to var(--bylx-pink) to undo. */
  --shadow-chunk: var(--bylx-purple);
  --shadow-chunk-sm: 4px 4px 0 var(--shadow-chunk);
  --shadow-chunk-md: 7px 7px 0 var(--shadow-chunk);
  --shadow-chunk-lg: 9px 9px 0 var(--shadow-chunk);
  --shadow-chunk-cyan: 6px 6px 0 var(--bylx-cyan);
  --glow-cyan: 0 0 0 3px rgba(89, 243, 255, 0.9);

  --ease-step-2: steps(2, end);
  --ease-step-3: steps(3, end);
  --ease-step-4: steps(4, end);
  --dur-flicker: 2.8s;
  --dur-float: 8s;
  --dur-pulse: 4.8s;
}