/* ─── AILevelUp shared design tokens ──────────────────────────────
   Added 2026-08-06 to stop brand colors/spacing living as three
   independent, drifting :root blocks (index.html, blog/style.css,
   tools/assets/app.css all defined the same values under different
   names, and blog's copy referenced a --muted variable it never
   defined). Link this file BEFORE any page's own stylesheet/inline
   <style> block. Pages may still declare their own :root overrides
   after this file loads (CSS custom properties resolve per-property,
   not per-block) — tools/assets/app.css does this deliberately for
   --ink, which means something different there (white text) than it
   does here (near-black text on a light band). Don't "fix" that
   collision by renaming; it's intentional and documented at its
   local override. */
:root {
  /* Dark surface family */
  --bg:       #050505;
  --bg2:      #0e0e0e;
  --bg3:      #161616;
  --surface:  #141414;
  --surfaceH: #1e1e1e;

  /* Borders — --line/--lineH are tools' historical names for the same values */
  --border:   rgba(255,255,255,0.07);
  --borderH:  rgba(255,255,255,0.15);
  --line:     var(--border);
  --lineH:    var(--borderH);

  /* Text on dark — --ink/--muted/--muted2 are tools' historical names.
     --muted did not previously exist as a real token; blog/style.css
     referenced var(--muted) without ever defining it and silently fell
     back to white text. This is the fix for that bug. */
  --text:     #ffffff;
  --text2:    rgba(255,255,255,0.55);
  --text3:    rgba(255,255,255,0.25);
  --muted:    var(--text2);
  --muted2:   var(--text3);

  --blue:       #3a5bdb;
  --blueL:      rgba(58,91,219,0.15);
  --blueSoft:   var(--blueL);

  /* Brand accent blue. Named --amber on index.html/micro-sap (misnamed
     historically — it has always held a blue, not an amber) and --accent
     on blog/tools. Both names are kept as aliases of the same value so
     no page needs a class-name rewrite to adopt this shared file. */
  --amber:        #3D9EF5;
  --amberL:       rgba(61,158,245,0.14);
  --amberG:       rgba(61,158,245,0.07);
  --accent:       var(--amber);
  --accentL:      var(--amberL);
  --accentSoft:   var(--amberL);
  --accentF:      var(--amberG);
  --accentFaint:  var(--amberG);

  /* Tools-only semantic status colors */
  --good: #3ECF8E;
  --warn: #F0B45A;
  --bad:  #FF6B6B;
  --info: #65BAFF;

  /* Light-band tokens (added 2026-08-05 with the alternating-band
     redesign; proven on index.html and cascaded to micro-sap/index.html).
     The page chapters between dark bands (--bg) and light bands (--paper)
     instead of running as one uniform dark slab. Every value below is the
     light-band counterpart of a dark token above, and all text pairs were
     contrast-checked against --paper:
       --ink   on --paper = 18.7:1   --ink2 on --paper = 5.9:1
       --ink3  on --paper =  4.8:1   --accentInk on --paper = 5.9:1
     Do not use --amber/--accent (#3D9EF5) for text on a light band: it
     lands at 2.4:1 and fails AA. Use --accentInk instead. */
  --paper:      #F7F6F3;
  --paperCard:  #FFFFFF;
  --paperCardH: #FDFCFA;
  /* Added 2026-08-10: --paperCard (#FFFFFF) is only 8 points lighter than
     --paper per channel — fine for cards, which get a border+shadow to read
     as distinct anyway, but too subtle on its own for a full-bleed band
     like the footer with nothing but a hairline border to set it apart.
     This is a deliberately more visible step *darker* than --paper (easier
     for the eye to register than a barely-lighter white) for surfaces that
     need to read as clearly separate with color alone. */
  --paperDeep:  #EFEDE7;
  --ink:        #0B0B0C;
  --ink2:       rgba(11,11,12,0.66);
  --ink3:       rgba(11,11,12,0.58);
  --inkLine:    rgba(11,11,12,0.12);
  --inkLineH:   rgba(11,11,12,0.26);
  --accentInk:  #0F5FA8;
  --accentInkL: rgba(15,95,168,0.09);

  /* Ink-safe status colors, added 2026-08-10 for the blog/tools all-light
     cascade. --good/--warn/--bad/--info (#3ECF8E/#F0B45A/#FF6B6B/#65BAFF)
     are mid-brightness colors tuned for dark surfaces; used as text on a
     light band they land under 2:1 and fail AA badly. These are darker,
     same-hue-family variants, contrast-checked against both --paper and
     --paperCard (white):
       --goodInk on --paper = 5.0:1   --goodInk on white = 5.4:1
       --warnInk on --paper = 5.5:1   --warnInk on white = 5.9:1
       --badInk  on --paper = 6.1:1   --badInk  on white  = 6.5:1
     --infoInk is just an alias of --accentInk (--info and --amber are the
     same blue family; no separate value needed). */
  --goodInk: #0F7A45;
  --warnInk: #8A5A00;
  --badInk:  #B3261E;
  --infoInk: var(--accentInk);

  /* Shape + layout */
  --r:    16px;
  --rL:   22px;
  --pill: 999px;
  --max:  1080px;
}

/* Shared skip-to-content link, added 2026-08-06 UI/UX review pass. No page
   previously had one — keyboard/screen-reader users had to tab through the
   full header on every load. Visually hidden until focused. */
.skip-link{position:fixed;top:-100px;left:12px;z-index:99999;background:#ffffff;color:#050505;padding:12px 20px;border-radius:8px;font-family:'Manrope',sans-serif;font-weight:700;font-size:.9rem;text-decoration:none;transition:top .2s ease;}
.skip-link:focus{top:12px;}

/* Visually-hidden but screen-reader-accessible utility, added 2026-08-06
   for form inputs that use a placeholder for sighted users but still need
   a real associated <label> for assistive tech. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}