/* ================================================================
   AARNHELM DESIGN SYSTEM v0.4 — May 2026
   Developer Token & Component Reference

   Import this file to get all design tokens and base components.
   Apply data-context="company|tilannekuva|labs" on a container,
   optionally with data-mode="dark".

   Requires Google Fonts: Inter 300–900, JetBrains Mono 400–700
   Requires Phosphor Icons (regular + bold)
   ================================================================ */


/* ================================================================
   1. FOUNDATIONS
   ================================================================ */

/* ---- Fonts ---- */
:root {
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-serif: 'Charter', 'Iowan Old Style', 'Bitstream Charter', Georgia, 'Times New Roman', serif;
  --font-mono:  'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace;
}

/* ---- Type Scale ---- */
:root {
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.8125rem; /* 13px */
  --text-base: 0.875rem;  /* 14px */
  --text-md:   1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  2rem;      /* 32px */
  --text-4xl:  2.5rem;    /* 40px */
  --text-5xl:  3rem;      /* 48px */
  --text-6xl:  3.5rem;    /* 56px */
}

/* ---- Font Weights ---- */
:root {
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-heavy:    800;
}

/* ---- Spacing — 4 px grid, 6 stops ----
   sp-1  =  4px   micro: icon-label gaps, inline spacing
   sp-2  =  8px   tight: button/input padding, compact gaps
   sp-4  = 16px   base:  standard padding, component gaps
   sp-8  = 32px   medium: between content blocks, grid gaps
   sp-16 = 64px   large: between page sections
   sp-24 = 96px   page:  hero padding, major vertical breaks
   ---------------------------------------------------- */
:root {
  --sp-1:  0.25rem; /*  4px */
  --sp-2:  0.5rem;  /*  8px */
  --sp-4:  1rem;    /* 16px */
  --sp-8:  2rem;    /* 32px */
  --sp-16: 4rem;    /* 64px */
  --sp-24: 6rem;    /* 96px */
}

/* ---- Border Radius ----
   sm   =  3px   badges, chips, inline code, tags
   md   =  6px   buttons, inputs, code blocks, alerts
   lg   = 10px   cards, panels, modals, dialogs
   full = 9999px progress bars, avatars only
   ---------------------------------------------------- */
:root {
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-full: 9999px;
}


/* ================================================================
   2. COLOR PALETTES
   ================================================================ */

/* ---- Sage Green — Universal neutral ----
   Sage replaces gray/slate everywhere. No second neutral needed.
   Light: 50-100 bg, 200 borders, 400-600 secondary text, 900-950 primary text.
   Dark:  950 bg, 800-900 surfaces, 700-800 borders, 100-400 text.
   Anchor: sage-300 #b8c8c0 · HSL(150, 13%, 75%)
   ---------------------------------------------------- */
:root {
  --sage-50:  #f2f6f4; /* Birch  — lightest background          */
  --sage-100: #e4ece8; /* Frost  — secondary background          */
  --sage-200: #cdddd5; /* Lichen — borders, wells                */
  --sage-300: #b8c8c0; /* Sage   — anchor, disabled fills        */
  --sage-400: #97ada3; /* Stone  — tertiary text, subtle borders  */
  --sage-500: #788e84; /* Moss   — placeholder text               */
  --sage-600: #5f7269; /* Spruce — secondary text (light mode)    */
  --sage-700: #4a5a52; /* Pine   — dark-mode fills                */
  --sage-800: #36423c; /* Shadow — dark-mode surfaces             */
  --sage-900: #222b27; /* Dusk   — dark-mode secondary bg         */
  --sage-950: #141a17; /* Night  — dark-mode primary bg           */
}

/* ---- Navy Blue — Tilannekuva accent only ----
   Never on the corporate site or Labs UI.
   Dark mode: shift to 300-400 for legibility.
   Anchor: navy-700 #002f6c · Pantone 294 C
   ---------------------------------------------------- */
:root {
  --navy-50:  #e8eef6; /* Mist     */
  --navy-100: #c8d7eb; /* Haze     */
  --navy-200: #91aed6; /* Sky      */
  --navy-300: #5a86c1; /* Steel    */
  --navy-400: #2e63a3; /* Cobalt   */
  --navy-500: #1a4f8a; /* Royal    */
  --navy-600: #0d3d75; /* Deep     */
  --navy-700: #002f6c; /* Navy     — anchor                      */
  --navy-800: #002254; /* Ink      */
  --navy-900: #00193e; /* Midnight */
  --navy-950: #000f28; /* Abyss    */
}

/* ---- Signal Colors — Status & feedback ----
   Four tiers per hue, identical across all contexts:
     100 — light-mode background
     300 — dark-mode foreground text / icons
     500 — light-mode foreground text / icons
     900 — dark-mode background
   ---------------------------------------------------- */
:root {
  /* Red · Error / Destructive */
  --red-100: #fde8e8;   --red-300: #f28b82;
  --red-500: #dc3545;   --red-900: #5c1a1a;

  /* Orange · Warning / Caution */
  --orange-100: #fef0db;   --orange-300: #fbbf24;
  --orange-500: #e08a2e;   --orange-900: #5a3812;

  /* Green · Success / Positive */
  --green-100: #e6f4ed;   --green-300: #7ecfa0;
  --green-500: #2e8b57;   --green-900: #123823;

  /* Blue · Info / Neutral status */
  --blue-100: #e8f0fe;   --blue-300: #8ab4f8;
  --blue-500: #2563eb;   --blue-900: #0f2a5c;

  /* Purple · Special / AI / Premium */
  --purple-100: #f0ebfe;   --purple-300: #c4b5fd;
  --purple-500: #7c3aed;   --purple-900: #2e1065;
}


/* ================================================================
   3. CONTEXT TOKENS
   Apply data-context on a wrapper. All child elements inherit.
   Dark mode: add data-mode="dark" on the same element.

   Semantic token names (use these, not palette vars):
     --bg              page canvas
     --bg-secondary    subtle section differentiation
     --bg-elevated     lifted interactive surfaces (+ shadow)
     --bg-well         recessed: code blocks, progress tracks
     --text-primary    headings, body
     --text-secondary  descriptions, less important
     --text-tertiary   metadata, timestamps, placeholders
     --text-on-fill    text sitting on --fill backgrounds
     --fill            primary button / CTA background
     --fill-hover      primary button hover
     --accent          category badges, active states
     --accent-subtle   accent background tint
     --link            hyperlink color
     --focus-ring      focus outline (3 px ring)
     --border          default borders
     --border-strong   emphasized borders
     --nav-bg          frosted navigation background
     --code-bg         code block background
     --code-border     code block border
     --shadow-sm/md/lg elevation shadows
     --emboss-raised/inset/well  inner shadow treatments
     --glass-hl        button highlight gradient
     --glass-sh        button composite shadow
     --glass-sh-h      button composite shadow (hover)
   ================================================================ */

/* ---- COMPANY · Light ---- */
[data-context="company"] {
  --bg:            var(--sage-50);
  --bg-secondary:  var(--sage-100);
  --bg-elevated:   #ffffff;
  --bg-well:       var(--sage-200);

  --text-primary:   var(--sage-900);
  --text-secondary: var(--sage-600);
  --text-tertiary:  var(--sage-400);
  --text-on-fill:   #fff;

  --fill:       var(--sage-800);
  --fill-hover: var(--sage-950);
  --accent:        var(--sage-600);
  --accent-subtle: var(--sage-100);

  --link:       var(--navy-600);
  --focus-ring: var(--navy-200);

  --border:        var(--sage-200);
  --border-strong: var(--sage-400);
  --nav-bg:        rgba(242, 246, 244, 0.90);
  --code-bg:       var(--sage-950);
  --code-border:   var(--sage-800);

  /* Elevation  — rgba(54,66,60, …) = sage-800 tinted */
  --shadow-sm: 0 2px 6px rgba(54,66,60,.07), 0 1px 2px rgba(54,66,60,.04);
  --shadow-md: 0 4px 12px rgba(54,66,60,.09), 0 2px 4px rgba(54,66,60,.05);
  --shadow-lg: 0 8px 24px rgba(54,66,60,.11), 0 4px 8px rgba(54,66,60,.05);

  /* Emboss */
  --emboss-raised: inset 0 1px 0 rgba(255,255,255,.50), inset 0 -1px 0 rgba(0,0,0,.06);
  --emboss-inset:  inset 0 1px 3px rgba(0,0,0,.10), inset 0 -1px 0 rgba(255,255,255,.30);
  --emboss-well:   inset 0 2px 6px rgba(0,0,0,.12), inset 0 -1px 0 rgba(255,255,255,.20);

  /* Glass */
  --glass-hl:   linear-gradient(to bottom, rgba(255,255,255,.45) 0%, rgba(255,255,255,.12) 48%, rgba(255,255,255,.03) 52%, transparent 100%);
  --glass-sh:   inset 0 1px 0 rgba(255,255,255,.50), inset 0 -1px 0 rgba(0,0,0,.06), 0 1px 3px rgba(54,66,60,.15), 0 2px 8px rgba(54,66,60,.08);
  --glass-sh-h: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.08), 0 2px 6px rgba(54,66,60,.20), 0 4px 12px rgba(54,66,60,.10);
}

/* ---- COMPANY · Dark ---- */
[data-context="company"][data-mode="dark"] {
  --bg:            var(--sage-950);
  --bg-secondary:  var(--sage-900);
  --bg-elevated:   var(--sage-800);
  --bg-well:       #0a0e0d;

  --text-primary:   var(--sage-100);
  --text-secondary: var(--sage-400);
  --text-tertiary:  var(--sage-600);
  --text-on-fill:   #fff;

  --fill:       var(--sage-700);
  --fill-hover: var(--sage-600);
  --accent:        var(--sage-400);
  --accent-subtle: var(--sage-900);

  --link:       var(--sage-300);
  --focus-ring: var(--sage-700);

  --border:        var(--sage-800);
  --border-strong: var(--sage-700);
  --nav-bg:        rgba(20, 26, 23, 0.90);
  --code-bg:       #0a0e0c;
  --code-border:   var(--sage-900);

  --shadow-sm: 0 2px 6px rgba(0,0,0,.22), 0 1px 2px rgba(0,0,0,.12);
  --shadow-md: 0 4px 12px rgba(0,0,0,.28), 0 2px 4px rgba(0,0,0,.14);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.32), 0 4px 8px rgba(0,0,0,.16);

  --emboss-raised: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.20);
  --emboss-inset:  inset 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(255,255,255,.04);
  --emboss-well:   inset 0 2px 6px rgba(0,0,0,.30), inset 0 -1px 0 rgba(255,255,255,.03);

  --glass-hl:   linear-gradient(to bottom, rgba(255,255,255,.18) 0%, rgba(255,255,255,.05) 48%, rgba(255,255,255,.01) 52%, transparent 100%);
  --glass-sh:   inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.28), 0 1px 3px rgba(0,0,0,.40), 0 2px 8px rgba(0,0,0,.25);
  --glass-sh-h: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.32), 0 2px 6px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.30);
}

/* ---- TILANNEKUVA · Light ---- */
[data-context="tilannekuva"] {
  --bg:            var(--sage-50);
  --bg-secondary:  var(--sage-100);
  --bg-elevated:   #ffffff;
  --bg-well:       var(--sage-200);

  --text-primary:   var(--sage-950);
  --text-secondary: var(--sage-600);
  --text-tertiary:  var(--sage-400);
  --text-on-fill:   #fff;

  --fill:       var(--navy-700);
  --fill-hover: var(--navy-800);
  --accent:        var(--navy-600);
  --accent-subtle: var(--navy-50);

  --link:       #1a6be0;
  --focus-ring: var(--navy-200);

  --border:        var(--sage-200);
  --border-strong: var(--sage-400);
  --nav-bg:        rgba(242, 246, 244, 0.90);
  --code-bg:       var(--navy-950);
  --code-border:   var(--navy-900);

  --shadow-sm: 0 2px 6px rgba(0,47,108,.06), 0 1px 2px rgba(0,0,0,.03);
  --shadow-md: 0 4px 12px rgba(0,47,108,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg: 0 8px 24px rgba(0,47,108,.10), 0 4px 8px rgba(0,0,0,.05);

  --emboss-raised: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.05);
  --emboss-inset:  inset 0 1px 3px rgba(0,0,0,.08), inset 0 -1px 0 rgba(255,255,255,.35);
  --emboss-well:   inset 0 2px 6px rgba(0,0,0,.10), inset 0 -1px 0 rgba(255,255,255,.25);

  --glass-hl:   linear-gradient(to bottom, rgba(255,255,255,.50) 0%, rgba(255,255,255,.15) 48%, rgba(255,255,255,.04) 52%, transparent 100%);
  --glass-sh:   inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,47,108,.08), 0 1px 3px rgba(0,47,108,.15), 0 2px 8px rgba(0,47,108,.08);
  --glass-sh-h: inset 0 1px 0 rgba(255,255,255,.60), inset 0 -1px 0 rgba(0,47,108,.10), 0 2px 6px rgba(0,47,108,.20), 0 4px 12px rgba(0,47,108,.10);
}

/* ---- TILANNEKUVA · Dark ---- */
[data-context="tilannekuva"][data-mode="dark"] {
  --bg:            var(--sage-950);
  --bg-secondary:  var(--sage-900);
  --bg-elevated:   var(--sage-800);
  --bg-well:       #0a0e0d;

  --text-primary:   var(--sage-100);
  --text-secondary: var(--sage-400);
  --text-tertiary:  var(--sage-600);
  --text-on-fill:   #fff;

  --fill:       var(--navy-600);
  --fill-hover: var(--navy-500);
  --accent:        var(--navy-300);
  --accent-subtle: var(--navy-950);

  --link:       #6ea8fe;
  --focus-ring: var(--navy-800);

  --border:        var(--sage-800);
  --border-strong: var(--sage-700);
  --nav-bg:        rgba(20, 26, 23, 0.90);
  --code-bg:       #080c14;
  --code-border:   var(--navy-900);

  --shadow-sm: 0 2px 6px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.15);
  --shadow-md: 0 4px 12px rgba(0,0,0,.30), 0 2px 4px rgba(0,0,0,.15);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.35), 0 4px 8px rgba(0,0,0,.18);

  --emboss-raised: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.25);
  --emboss-inset:  inset 0 1px 3px rgba(0,0,0,.30), inset 0 -1px 0 rgba(255,255,255,.03);
  --emboss-well:   inset 0 2px 6px rgba(0,0,0,.35), inset 0 -1px 0 rgba(255,255,255,.02);

  --glass-hl:   linear-gradient(to bottom, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 48%, transparent 52%, transparent 100%);
  --glass-sh:   inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.32), 0 1px 3px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.30);
  --glass-sh-h: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.36), 0 2px 6px rgba(0,0,0,.50), 0 4px 12px rgba(0,0,0,.35);
}

/* ---- LABS · Light ---- */
[data-context="labs"] {
  --bg:            #eef3f0;
  --bg-secondary:  var(--sage-100);
  --bg-elevated:   #f8faf9;
  --bg-well:       var(--sage-200);

  --text-primary:   var(--sage-900);
  --text-secondary: var(--sage-600);
  --text-tertiary:  var(--sage-400);
  --text-on-fill:   #fff;

  --fill:       #1a3a2a;
  --fill-hover: #0f2a1c;
  --accent:        var(--green-500);
  --accent-subtle: var(--green-100);

  --link:       var(--green-500);
  --focus-ring: var(--sage-300);

  --border:        var(--sage-200);
  --border-strong: var(--sage-400);
  --nav-bg:        rgba(238, 243, 240, 0.90);
  --code-bg:       #0a0f0c;
  --code-border:   #141e18;

  --shadow-sm: 0 2px 6px rgba(26,58,42,.07), 0 1px 2px rgba(0,0,0,.03);
  --shadow-md: 0 4px 12px rgba(26,58,42,.09), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg: 0 8px 24px rgba(26,58,42,.11), 0 4px 8px rgba(0,0,0,.05);

  --emboss-raised: inset 0 1px 0 rgba(255,255,255,.50), inset 0 -1px 0 rgba(0,0,0,.06);
  --emboss-inset:  inset 0 1px 3px rgba(0,0,0,.10), inset 0 -1px 0 rgba(255,255,255,.30);
  --emboss-well:   inset 0 2px 6px rgba(0,0,0,.12), inset 0 -1px 0 rgba(255,255,255,.20);

  --glass-hl:   linear-gradient(to bottom, rgba(255,255,255,.42) 0%, rgba(255,255,255,.10) 48%, rgba(255,255,255,.02) 52%, transparent 100%);
  --glass-sh:   inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.06), 0 1px 3px rgba(26,58,42,.15), 0 2px 8px rgba(26,58,42,.08);
  --glass-sh-h: inset 0 1px 0 rgba(255,255,255,.50), inset 0 -1px 0 rgba(0,0,0,.08), 0 2px 6px rgba(26,58,42,.20), 0 4px 12px rgba(26,58,42,.10);
}

/* ---- LABS · Dark ---- */
[data-context="labs"][data-mode="dark"] {
  --bg:            #0b100e;
  --bg-secondary:  #121a16;
  --bg-elevated:   #182119;
  --bg-well:       #070b09;

  --text-primary:   #d0ddd5;
  --text-secondary: #7a9486;
  --text-tertiary:  #3e5348;
  --text-on-fill:   #0b100e;

  --fill:       #1a4a30;
  --fill-hover: #1d5a38;
  --accent:        var(--green-500);
  --accent-subtle: #0d1a12;

  --link:       #7ecfa0;
  --focus-ring: #2e5a40;

  --border:        #1e2c24;
  --border-strong: #2e4038;
  --nav-bg:        rgba(11, 16, 14, 0.90);
  --code-bg:       #080d0b;
  --code-border:   #121a16;

  --shadow-sm: 0 2px 6px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.15);
  --shadow-md: 0 4px 12px rgba(0,0,0,.30), 0 2px 4px rgba(0,0,0,.15);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.35), 0 4px 8px rgba(0,0,0,.18);

  --emboss-raised: inset 0 1px 0 rgba(126,207,160,.08), inset 0 -1px 0 rgba(0,0,0,.25);
  --emboss-inset:  inset 0 1px 3px rgba(0,0,0,.30), inset 0 -1px 0 rgba(126,207,160,.03);
  --emboss-well:   inset 0 2px 6px rgba(0,0,0,.35), inset 0 -1px 0 rgba(126,207,160,.02);

  --glass-hl:   linear-gradient(to bottom, rgba(126,207,160,.14) 0%, rgba(126,207,160,.04) 48%, transparent 52%, transparent 100%);
  --glass-sh:   inset 0 1px 0 rgba(126,207,160,.12), inset 0 -1px 0 rgba(0,0,0,.32), 0 1px 3px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.30);
  --glass-sh-h: inset 0 1px 0 rgba(126,207,160,.16), inset 0 -1px 0 rgba(0,0,0,.36), 0 2px 6px rgba(0,0,0,.50), 0 4px 12px rgba(0,0,0,.35);
}


/* ================================================================
   4. BASE RESET
   ================================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* ================================================================
   5. COMPONENTS
   All components respond to the nearest data-context ancestor.
   ================================================================ */

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  padding: var(--sp-2) var(--sp-4);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  line-height: 1.4;
  transition: background 0.15s, box-shadow 0.15s;
}

.btn-p {
  background: var(--fill);
  color: var(--text-on-fill);
  box-shadow: var(--glass-sh);
}
.btn-p::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-hl);
  pointer-events: none;
  border-radius: inherit;
}
.btn-p:hover {
  background: var(--fill-hover);
  box-shadow: var(--glass-sh-h);
}

.btn-s {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  box-shadow: var(--emboss-raised), var(--shadow-sm);
}
.btn-s::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,.12) 0%, transparent 100%);
  pointer-events: none;
  border-radius: inherit;
}
.btn-s:hover {
  background: var(--bg-secondary);
}

.btn-lg {
  font-size: var(--text-md);
  padding: var(--sp-4) var(--sp-8);
}
.btn-sm {
  font-size: var(--text-xs);
  padding: var(--sp-1) var(--sp-2);
}

/* ---- Inputs ---- */
.inp {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--emboss-inset);
  outline: none;
  width: 100%;
  max-width: 300px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.inp::placeholder {
  color: var(--text-tertiary);
}
.inp:focus {
  border-color: var(--fill);
  box-shadow: var(--emboss-inset), 0 0 0 3px var(--focus-ring);
}

/* ---- Cards (Labs only) ---- */
.card {
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow-md);
}

/* ---- Badges ---- */
.badge {
  display: inline-flex;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.15em 0.55em;
  border-radius: var(--radius-sm);
  background: var(--accent-subtle);
  color: var(--accent);
}

/* ---- Progress Bars ---- */
.prog-track {
  height: 14px;
  background: var(--bg-well);
  border-radius: var(--radius-full);
  box-shadow: var(--emboss-well);
  overflow: hidden;
}
.prog-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--fill);
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(0,0,0,.12);
}
.prog-fill::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--glass-hl);
}

/* ---- Navigation Bar ---- */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-4);
  background: var(--nav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

/* ---- Code Blocks ---- */
.code-block {
  background: var(--code-bg);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-variant-ligatures: none;
  line-height: 1.65;
  overflow-x: auto;
  border: 1px solid var(--code-border);
  box-shadow: var(--emboss-well);
  color: #adbac7;
}

/* Syntax highlighting — GitHub Dark Dimmed */
.code-block .kw  { color: #f47067; } /* keywords     */
.code-block .fn  { color: #dcbdfb; } /* functions    */
.code-block .str { color: #96d0ff; } /* strings      */
.code-block .num { color: #6cb6ff; } /* numbers      */
.code-block .cm  { color: #768390; } /* comments     */
.code-block .tag { color: #8ddb8c; } /* tags / names */
.code-block .bi  { color: #f69d50; } /* built-ins    */
.code-block .op  { color: #f47067; } /* operators    */

/* ---- Alerts ---- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border-radius: var(--radius-md);
}
.alert-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.alert-body {
  font-size: var(--text-xs);
}
.alert-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Signal alert variants — light mode */
.alert-success { background: var(--green-100); }
.alert-success .alert-icon,
.alert-success .alert-body  { color: var(--green-500); }
.alert-success .alert-title { color: var(--green-900); }

.alert-error { background: var(--red-100); }
.alert-error .alert-icon,
.alert-error .alert-body  { color: var(--red-500); }
.alert-error .alert-title { color: var(--red-900); }

.alert-warning { background: var(--orange-100); }
.alert-warning .alert-icon,
.alert-warning .alert-body  { color: var(--orange-500); }
.alert-warning .alert-title { color: var(--orange-900); }

.alert-info { background: var(--blue-100); }
.alert-info .alert-icon,
.alert-info .alert-body  { color: var(--blue-500); }
.alert-info .alert-title { color: var(--blue-900); }

/* Signal alert variants — dark mode (use 900 bg, 300 text) */
.alert-success-dark { background: var(--green-900); }
.alert-success-dark .alert-icon,
.alert-success-dark .alert-title { color: var(--green-300); }
.alert-success-dark .alert-body  { color: var(--green-500); }

.alert-error-dark { background: var(--red-900); }
.alert-error-dark .alert-icon,
.alert-error-dark .alert-title { color: var(--red-300); }
.alert-error-dark .alert-body  { color: var(--red-500); }

.alert-warning-dark { background: var(--orange-900); }
.alert-warning-dark .alert-icon,
.alert-warning-dark .alert-title { color: var(--orange-300); }
.alert-warning-dark .alert-body  { color: var(--orange-500); }

.alert-info-dark { background: var(--blue-900); }
.alert-info-dark .alert-icon,
.alert-info-dark .alert-title { color: var(--blue-300); }
.alert-info-dark .alert-body  { color: var(--blue-500); }