/* ==========================================================================
   snglst Design System — Global Stylesheet

   Palette: Rich Dusk (Fathom) at 200° + Warm Neutrals (Slate / Cloud / Ivory)
   Compatible with Web Awesome semantic color tokens (--wa-color-*)

   Color architecture:
     1. Raw tint scales (--wa-color-brand-{0-100}, --wa-color-neutral-{0-100})
     2. Semantic tokens (--wa-color-{group}-{role}-{attention})
     3. Surface / text / overlay tokens
     4. snglst named palette (friendly aliases)
     5. Legacy compatibility layer (--color-*)
   ========================================================================== */


/* ==========================================================================
   1. COLOR SCALES — Raw tint palettes

   Format: --wa-color-{hue}-{tint}
   Tints: 0 (near-black) → 100 (near-white)
   ========================================================================== */

:root {

  /* ─── Brand: Rich Dusk / Fathom (H:200°) ─────────────────────────────── */

  --wa-color-brand-0:   #080E11;
  --wa-color-brand-05:  #091B24;
  --wa-color-brand-10:  #0A2938;  /* Fathom Dark  */
  --wa-color-brand-20:  #15465E;  /* Fathom Medium */
  --wa-color-brand-30:  #236282;  /* Fathom Light  */
  --wa-color-brand-40:  #2E7FA6;
  --wa-color-brand-50:  #3A98C2;  /* Key color     */
  --wa-color-brand-60:  #5BAFD2;
  --wa-color-brand-70:  #88C3DE;
  --wa-color-brand-80:  #B5D8EA;
  --wa-color-brand-90:  #DDEAF1;
  --wa-color-brand-95:  #E8F0F5;
  --wa-color-brand-100: #F4F7F9;


  /* ─── Neutral: Warm Gray / Slate-Cloud-Ivory (H:~55° S:1-10%) ─────── */

  --wa-color-neutral-0:   #0D0D0C;
  --wa-color-neutral-05:  #131312;
  --wa-color-neutral-10:  #191919;  /* Slate Dark    */
  --wa-color-neutral-20:  #262625;  /* Slate Medium  */
  --wa-color-neutral-30:  #40403E;  /* Slate Light   */
  --wa-color-neutral-40:  #666663;  /* Cloud Dark    */
  --wa-color-neutral-50:  #91918D;  /* Cloud Medium  */
  --wa-color-neutral-60:  #A9A9A4;
  --wa-color-neutral-70:  #BFBFBA;  /* Cloud Light   */
  --wa-color-neutral-80:  #E5E4DF;  /* Ivory Dark    */
  --wa-color-neutral-90:  #F0F0EB;  /* Ivory Medium  */
  --wa-color-neutral-95:  #F5F5F1;
  --wa-color-neutral-100: #FAFAF7;  /* Ivory Light   */


  /* ─── Success (Green) ─────────────────────────────────────────────────── */

  --wa-color-success-0:   #071207;
  --wa-color-success-05:  #0B1E0C;
  --wa-color-success-10:  #0F2B12;
  --wa-color-success-20:  #1A4A20;
  --wa-color-success-30:  #256A2E;
  --wa-color-success-40:  #318A3D;
  --wa-color-success-50:  #3DA64A;
  --wa-color-success-60:  #5DBF6A;
  --wa-color-success-70:  #89D393;
  --wa-color-success-80:  #B5E4BB;
  --wa-color-success-90:  #DFF3E1;
  --wa-color-success-95:  #E9F6EB;
  --wa-color-success-100: #F4FAF5;


  /* ─── Warning (Amber) ─────────────────────────────────────────────────── */

  --wa-color-warning-0:   #141003;
  --wa-color-warning-05:  #281F05;
  --wa-color-warning-10:  #3D2F08;
  --wa-color-warning-20:  #6B5210;
  --wa-color-warning-30:  #947318;
  --wa-color-warning-40:  #BD9520;
  --wa-color-warning-50:  #D4A828;
  --wa-color-warning-60:  #DFB94D;
  --wa-color-warning-70:  #E8CD7D;
  --wa-color-warning-80:  #F1E0AD;
  --wa-color-warning-90:  #F9F1D9;
  --wa-color-warning-95:  #FBF5E4;
  --wa-color-warning-100: #FDFAF0;


  /* ─── Danger (Red) ─────────────────────────────────────────────────────── */

  --wa-color-danger-0:   #140505;
  --wa-color-danger-05:  #280A0A;
  --wa-color-danger-10:  #3D0F0F;
  --wa-color-danger-20:  #6E1A1A;
  --wa-color-danger-30:  #9E2424;
  --wa-color-danger-40:  #BF3434;
  --wa-color-danger-50:  #D44040;
  --wa-color-danger-60:  #DF6060;
  --wa-color-danger-70:  #E88C8C;
  --wa-color-danger-80:  #F1B5B5;
  --wa-color-danger-90:  #F9DCDC;
  --wa-color-danger-95:  #FBE8E8;
  --wa-color-danger-100: #FDF4F4;


/* ==========================================================================
   2. SEMANTIC TOKENS — Group + Role + Attention

   Groups:  brand, neutral, success, warning, danger
   Roles:   fill (backgrounds), border (strokes), on (text on fills)
   Levels:  loud (high emphasis), moderate, normal (WA default), quiet (low emphasis)
   ========================================================================== */

  /* ─── Brand ───────────────────────────────────────────────────────────── */

  --wa-color-brand-fill-loud:      var(--wa-color-brand-30);
  --wa-color-brand-fill-moderate:  var(--wa-color-brand-20);
  --wa-color-brand-fill-normal:    var(--wa-color-brand-80);
  --wa-color-brand-fill-quiet:     var(--wa-color-brand-90);

  --wa-color-brand-border-loud:    var(--wa-color-brand-30);
  --wa-color-brand-border-moderate:var(--wa-color-brand-60);
  --wa-color-brand-border-normal:  var(--wa-color-brand-70);
  --wa-color-brand-border-quiet:   var(--wa-color-brand-80);

  --wa-color-brand-on-loud:        var(--wa-color-neutral-100);
  --wa-color-brand-on-moderate:    var(--wa-color-neutral-100);
  --wa-color-brand-on-normal:      var(--wa-color-brand-30);
  --wa-color-brand-on-quiet:       var(--wa-color-brand-20);


  /* ─── Neutral ─────────────────────────────────────────────────────────── */

  --wa-color-neutral-fill-loud:      var(--wa-color-neutral-10);
  --wa-color-neutral-fill-moderate:  var(--wa-color-neutral-30);
  --wa-color-neutral-fill-normal:    var(--wa-color-neutral-80);
  --wa-color-neutral-fill-quiet:     var(--wa-color-neutral-90);

  --wa-color-neutral-border-loud:    var(--wa-color-neutral-40);
  --wa-color-neutral-border-moderate:var(--wa-color-neutral-60);
  --wa-color-neutral-border-normal:  var(--wa-color-neutral-80);
  --wa-color-neutral-border-quiet:   var(--wa-color-neutral-90);

  --wa-color-neutral-on-loud:        var(--wa-color-neutral-100);
  --wa-color-neutral-on-moderate:    var(--wa-color-neutral-100);
  --wa-color-neutral-on-normal:      var(--wa-color-neutral-20);
  --wa-color-neutral-on-quiet:       var(--wa-color-neutral-10);


  /* ─── Success ─────────────────────────────────────────────────────────── */

  --wa-color-success-fill-loud:      var(--wa-color-success-30);
  --wa-color-success-fill-moderate:  var(--wa-color-success-20);
  --wa-color-success-fill-normal:    var(--wa-color-success-80);
  --wa-color-success-fill-quiet:     var(--wa-color-success-90);

  --wa-color-success-border-loud:    var(--wa-color-success-30);
  --wa-color-success-border-moderate:var(--wa-color-success-60);
  --wa-color-success-border-normal:  var(--wa-color-success-70);
  --wa-color-success-border-quiet:   var(--wa-color-success-80);

  --wa-color-success-on-loud:        var(--wa-color-neutral-100);
  --wa-color-success-on-moderate:    var(--wa-color-neutral-100);
  --wa-color-success-on-normal:      var(--wa-color-success-30);
  --wa-color-success-on-quiet:       var(--wa-color-success-20);


  /* ─── Warning ─────────────────────────────────────────────────────────── */

  --wa-color-warning-fill-loud:      var(--wa-color-warning-40);
  --wa-color-warning-fill-moderate:  var(--wa-color-warning-30);
  --wa-color-warning-fill-normal:    var(--wa-color-warning-80);
  --wa-color-warning-fill-quiet:     var(--wa-color-warning-90);

  --wa-color-warning-border-loud:    var(--wa-color-warning-40);
  --wa-color-warning-border-moderate:var(--wa-color-warning-60);
  --wa-color-warning-border-normal:  var(--wa-color-warning-70);
  --wa-color-warning-border-quiet:   var(--wa-color-warning-80);

  --wa-color-warning-on-loud:        var(--wa-color-neutral-0);
  --wa-color-warning-on-moderate:    var(--wa-color-neutral-0);
  --wa-color-warning-on-normal:      var(--wa-color-warning-30);
  --wa-color-warning-on-quiet:       var(--wa-color-warning-20);


  /* ─── Danger ──────────────────────────────────────────────────────────── */

  --wa-color-danger-fill-loud:      var(--wa-color-danger-30);
  --wa-color-danger-fill-moderate:  var(--wa-color-danger-20);
  --wa-color-danger-fill-normal:    var(--wa-color-danger-80);
  --wa-color-danger-fill-quiet:     var(--wa-color-danger-90);

  --wa-color-danger-border-loud:    var(--wa-color-danger-30);
  --wa-color-danger-border-moderate:var(--wa-color-danger-60);
  --wa-color-danger-border-normal:  var(--wa-color-danger-70);
  --wa-color-danger-border-quiet:   var(--wa-color-danger-80);

  --wa-color-danger-on-loud:        var(--wa-color-neutral-100);
  --wa-color-danger-on-moderate:    var(--wa-color-neutral-100);
  --wa-color-danger-on-normal:      var(--wa-color-danger-30);
  --wa-color-danger-on-quiet:       var(--wa-color-danger-20);


  /* ─── Generic / Variant-less (default to neutral) ─────────────────────── */

  --wa-color-fill-loud:      var(--wa-color-neutral-fill-loud);
  --wa-color-fill-moderate:  var(--wa-color-neutral-fill-moderate);
  --wa-color-fill-normal:    var(--wa-color-neutral-fill-normal);
  --wa-color-fill-quiet:     var(--wa-color-neutral-fill-quiet);

  --wa-color-border-loud:    var(--wa-color-neutral-border-loud);
  --wa-color-border-moderate:var(--wa-color-neutral-border-moderate);
  --wa-color-border-normal:  var(--wa-color-neutral-border-normal);
  --wa-color-border-quiet:   var(--wa-color-neutral-border-quiet);

  --wa-color-on-loud:        var(--wa-color-neutral-on-loud);
  --wa-color-on-moderate:    var(--wa-color-neutral-on-moderate);
  --wa-color-on-normal:      var(--wa-color-neutral-on-normal);
  --wa-color-on-quiet:       var(--wa-color-neutral-on-quiet);


/* ==========================================================================
   3. SURFACE / TEXT / OVERLAY / FOCUS
   ========================================================================== */

  /* ─── Surfaces ────────────────────────────────────────────────────────── */

  --wa-color-surface-base:    var(--wa-color-neutral-90);   /* Ivory Medium — page bg  */
  --wa-color-surface-default: var(--wa-color-neutral-100);  /* form controls, inputs   */
  --wa-color-surface-raised:  var(--wa-color-neutral-100);  /* Ivory Light  — cards    */
  --wa-color-surface-lowered: var(--wa-color-neutral-80);   /* Ivory Dark   — wells    */
  --wa-color-surface-overlay: rgba(25, 25, 25, 0.5);
  --wa-color-surface-border:  var(--wa-color-neutral-80);


  /* ─── Overlays (WA 3.2 — modals, inline panels) ─────────────────────── */

  --wa-color-overlay-modal:  color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent);


  /* ─── Shadow color (WA 3.2 — scales with --wa-shadow-blur-scale) ────── */

  --wa-color-shadow: color-mix(
    in oklab,
    var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
    transparent
  );


  /* ─── Text ────────────────────────────────────────────────────────────── */

  --wa-color-text:           var(--wa-color-neutral-10);
  --wa-color-text-normal:    var(--wa-color-neutral-10);    /* WA 3.2 form labels/values */
  --wa-color-text-quiet:     var(--wa-color-neutral-40);    /* WA 3.2 hints/secondary    */
  --wa-color-text-link:      var(--wa-color-brand-40);      /* WA 3.2 link color         */
  --wa-color-text-secondary: var(--wa-color-neutral-40);
  --wa-color-text-tertiary:  var(--wa-color-neutral-50);
  --wa-color-text-inverse:   var(--wa-color-neutral-100);
  --wa-color-text-brand:     var(--wa-color-brand-30);


  /* ─── Focus ring ──────────────────────────────────────────────────────── */

  --wa-color-focus: var(--wa-color-brand-50);
  --wa-focus-ring:  0 0 0 3px color-mix(in srgb, var(--wa-color-focus) 40%, transparent);


  /* ─── Hover / active state mixing (WA 3.2) ─────────────────────────── */

  --wa-color-mix-hover:  black 10%;
  --wa-color-mix-active: black 20%;


/* ==========================================================================
   4. snglst NAMED PALETTE — Friendly aliases for direct use
   ========================================================================== */

  /* Fathom (brand accent — Rich Dusk F at 200°) */
  --snglst-fathom-dark:   #0A2938;
  --snglst-fathom:        #15465E;
  --snglst-fathom-light:  #236282;

  /* Slate (dark neutrals) */
  --snglst-slate-dark:    #191919;
  --snglst-slate:         #262625;
  --snglst-slate-light:   #40403E;

  /* Cloud (mid neutrals) */
  --snglst-cloud-dark:    #666663;
  --snglst-cloud:         #91918D;
  --snglst-cloud-light:   #BFBFBA;

  /* Ivory (light neutrals) */
  --snglst-ivory-dark:    #E5E4DF;
  --snglst-ivory:         #F0F0EB;
  --snglst-ivory-light:   #FAFAF7;

  /* Parchment (warm background — à la Claude's Pampas) */
  --snglst-parchment:     #F4F3EE;


/* ==========================================================================
   5. LEGACY COMPATIBILITY — Maps old --color-* tokens to new system
      (Allows existing backoffice code to work without changes)
   ========================================================================== */

  --color-primary:        var(--wa-color-brand-fill-loud);
  --color-primary-hover:  var(--wa-color-brand-20);
  --color-secondary:      var(--wa-color-neutral-40);
  --color-accent:         var(--wa-color-brand-50);

  --color-bg:             var(--wa-color-surface-base);
  --color-bg-secondary:   var(--wa-color-surface-raised);
  --color-text:           var(--wa-color-text);
  --color-text-secondary: var(--wa-color-text-secondary);
  --color-border:         var(--wa-color-neutral-border-quiet);


/* ==========================================================================
   6. SPACING
   ========================================================================== */

  --spacing-xs:  0.25rem;
  --spacing-sm:  0.5rem;
  --spacing-md:  1rem;
  --spacing-lg:  1.5rem;
  --spacing-xl:  2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;


/* ==========================================================================
   7. TYPOGRAPHY — IBM Plex family

   Faces:
     IBM Plex Serif         — headings, editorial, pull quotes
     IBM Plex Sans          — body text, UI labels, forms
     IBM Plex Sans Condensed — navigation, tabs, tags, compact UI
     IBM Plex Mono          — code, data, technical content

   Token layers:
     a. Generic stacks (--wa-font-sans, --wa-font-serif, --wa-font-mono)
     b. Role assignments (--wa-font-family-heading, -body, -code)
     c. snglst aliases (--font-family, --font-family-mono, etc.)
   ========================================================================== */

  /* ─── a. Generic font stacks (Web Awesome compatible) ─────────────────── */

  --wa-font-sans:      'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wa-font-serif:     'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --wa-font-mono:      'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;
  --wa-font-condensed: 'IBM Plex Sans Condensed', 'IBM Plex Sans', Arial Narrow, sans-serif;


  /* ─── b. Role-based assignments (Web Awesome semantic) ────────────────── */

  --wa-font-family-heading: var(--wa-font-serif);
  --wa-font-family-body:    var(--wa-font-sans);
  --wa-font-family-code:    var(--wa-font-mono);


  /* ─── c. snglst aliases + legacy compatibility ────────────────────────── */
  /* IMPORTANT: These use LITERAL font stacks, not var(--wa-font-*) refs.  */
  /* The WA kit injects a theme stylesheet after ours that re-declares     */
  /* every --wa-* token with system-font defaults. Any var() chain through */
  /* a --wa-* property will resolve to WA's values, not ours.              */

  --font-family:           'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-heading:   'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --font-family-mono:      'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;
  --font-family-condensed: 'IBM Plex Sans Condensed', 'IBM Plex Sans', Arial Narrow, sans-serif;


  /* ─── Font sizes (1.125 ratio, Web Awesome compatible) ────────────────── */

  --wa-font-size-scale: 1;

  --wa-font-size-2xs:  0.625rem;  /* 10px */
  --wa-font-size-xs:   0.75rem;   /* 12px */
  --wa-font-size-s:    0.875rem;  /* 14px */
  --wa-font-size-m:    1rem;      /* 16px — base */
  --wa-font-size-l:    1.25rem;   /* 20px */
  --wa-font-size-xl:   1.5rem;    /* 24px */
  --wa-font-size-2xl:  1.875rem;  /* 30px */
  --wa-font-size-3xl:  2.25rem;   /* 36px */
  --wa-font-size-4xl:  3rem;      /* 48px */

  /* Legacy size aliases */
  --font-size-xs:   var(--wa-font-size-xs);
  --font-size-sm:   var(--wa-font-size-s);
  --font-size-base: var(--wa-font-size-m);
  --font-size-lg:   var(--wa-font-size-l);
  --font-size-xl:   var(--wa-font-size-xl);
  --font-size-2xl:  var(--wa-font-size-2xl);
  --font-size-3xl:  var(--wa-font-size-3xl);


  /* ─── Font weights ────────────────────────────────────────────────────── */

  --wa-font-weight-light:    300;
  --wa-font-weight-normal:   400;
  --wa-font-weight-medium:   500;
  --wa-font-weight-semibold: 600;
  --wa-font-weight-bold:     700;
  --wa-font-weight-action:   500;  /* buttons, tabs, interactive labels */

  /* Legacy weight aliases */
  --font-weight-normal:   var(--wa-font-weight-normal);
  --font-weight-medium:   var(--wa-font-weight-medium);
  --font-weight-semibold: var(--wa-font-weight-semibold);
  --font-weight-bold:     var(--wa-font-weight-bold);


  /* ─── Line heights (unitless, Web Awesome compatible) ─────────────────── */

  --wa-line-height-denser: 1.0;
  --wa-line-height-dense:  1.25;
  --wa-line-height-normal: 1.5;
  --wa-line-height-loose:  1.75;
  --wa-line-height-looser: 2.0;

  /* Legacy line-height aliases */
  --line-height-tight:  var(--wa-line-height-dense);
  --line-height-normal: var(--wa-line-height-normal);
  --line-height-loose:  var(--wa-line-height-loose);


  /* ─── Letter spacing (Web Awesome compatible) ─────────────────────────── */

  --wa-letter-spacing-denser: -0.03em;
  --wa-letter-spacing-dense:  -0.015em;
  --wa-letter-spacing-normal:  0;
  --wa-letter-spacing-loose:   0.025em;
  --wa-letter-spacing-looser:  0.05em;

  /* Legacy + snglst aliases */
  --letter-spacing-tight:  var(--wa-letter-spacing-dense);
  --letter-spacing-normal: var(--wa-letter-spacing-normal);
  --letter-spacing-wide:   var(--wa-letter-spacing-loose);
  --letter-spacing-caps:   0.1em;


/* ==========================================================================
   8. BORDERS & RADIUS
   ========================================================================== */

  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-full: 9999px;

  --border-width-thin:   1px;
  --border-width-medium: 2px;


/* ==========================================================================
   9. SHADOWS
   ========================================================================== */

  --shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);


/* ==========================================================================
   10. TRANSITIONS
   ========================================================================== */

  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

}


/* ==========================================================================
   DARK MODE

   Flips semantic token assignments so loud = lighter tints,
   quiet = darker tints. Surfaces invert to dark slate backgrounds.
   ========================================================================== */

[data-theme="dark"],
.wa-dark {

  /* Brand (louder = lighter in dark mode) */
  --wa-color-brand-fill-loud:      var(--wa-color-brand-40);
  --wa-color-brand-fill-moderate:  var(--wa-color-brand-30);
  --wa-color-brand-fill-normal:    var(--wa-color-brand-10);
  --wa-color-brand-fill-quiet:     var(--wa-color-brand-0);

  --wa-color-brand-border-loud:    var(--wa-color-brand-50);
  --wa-color-brand-border-moderate:var(--wa-color-brand-40);
  --wa-color-brand-border-normal:  var(--wa-color-brand-30);
  --wa-color-brand-border-quiet:   var(--wa-color-brand-20);

  --wa-color-brand-on-loud:        var(--wa-color-neutral-100);
  --wa-color-brand-on-moderate:    var(--wa-color-neutral-100);
  --wa-color-brand-on-normal:      var(--wa-color-brand-70);
  --wa-color-brand-on-quiet:       var(--wa-color-brand-80);


  /* Neutral (flipped) */
  --wa-color-neutral-fill-loud:      var(--wa-color-neutral-90);
  --wa-color-neutral-fill-moderate:  var(--wa-color-neutral-70);
  --wa-color-neutral-fill-normal:    var(--wa-color-neutral-30);
  --wa-color-neutral-fill-quiet:     var(--wa-color-neutral-20);

  --wa-color-neutral-border-loud:    var(--wa-color-neutral-60);
  --wa-color-neutral-border-moderate:var(--wa-color-neutral-40);
  --wa-color-neutral-border-normal:  var(--wa-color-neutral-30);
  --wa-color-neutral-border-quiet:   var(--wa-color-neutral-20);

  --wa-color-neutral-on-loud:        var(--wa-color-neutral-0);
  --wa-color-neutral-on-moderate:    var(--wa-color-neutral-0);
  --wa-color-neutral-on-normal:      var(--wa-color-neutral-80);
  --wa-color-neutral-on-quiet:       var(--wa-color-neutral-90);


  /* Success */
  --wa-color-success-fill-loud:      var(--wa-color-success-40);
  --wa-color-success-fill-moderate:  var(--wa-color-success-30);
  --wa-color-success-fill-normal:    var(--wa-color-success-10);
  --wa-color-success-fill-quiet:     var(--wa-color-success-0);

  --wa-color-success-border-loud:    var(--wa-color-success-50);
  --wa-color-success-border-moderate:var(--wa-color-success-40);
  --wa-color-success-border-normal:  var(--wa-color-success-30);
  --wa-color-success-border-quiet:   var(--wa-color-success-20);

  --wa-color-success-on-loud:        var(--wa-color-neutral-100);
  --wa-color-success-on-moderate:    var(--wa-color-neutral-100);
  --wa-color-success-on-normal:      var(--wa-color-success-70);
  --wa-color-success-on-quiet:       var(--wa-color-success-80);

  /* Warning */
  --wa-color-warning-fill-loud:      var(--wa-color-warning-50);
  --wa-color-warning-fill-moderate:  var(--wa-color-warning-40);
  --wa-color-warning-fill-normal:    var(--wa-color-warning-10);
  --wa-color-warning-fill-quiet:     var(--wa-color-warning-0);

  --wa-color-warning-border-loud:    var(--wa-color-warning-50);
  --wa-color-warning-border-moderate:var(--wa-color-warning-40);
  --wa-color-warning-border-normal:  var(--wa-color-warning-30);
  --wa-color-warning-border-quiet:   var(--wa-color-warning-20);

  --wa-color-warning-on-loud:        var(--wa-color-neutral-0);
  --wa-color-warning-on-moderate:    var(--wa-color-neutral-0);
  --wa-color-warning-on-normal:      var(--wa-color-warning-70);
  --wa-color-warning-on-quiet:       var(--wa-color-warning-80);

  /* Danger */
  --wa-color-danger-fill-loud:      var(--wa-color-danger-40);
  --wa-color-danger-fill-moderate:  var(--wa-color-danger-30);
  --wa-color-danger-fill-normal:    var(--wa-color-danger-10);
  --wa-color-danger-fill-quiet:     var(--wa-color-danger-0);

  --wa-color-danger-border-loud:    var(--wa-color-danger-50);
  --wa-color-danger-border-moderate:var(--wa-color-danger-40);
  --wa-color-danger-border-normal:  var(--wa-color-danger-30);
  --wa-color-danger-border-quiet:   var(--wa-color-danger-20);

  --wa-color-danger-on-loud:        var(--wa-color-neutral-100);
  --wa-color-danger-on-moderate:    var(--wa-color-neutral-100);
  --wa-color-danger-on-normal:      var(--wa-color-danger-70);
  --wa-color-danger-on-quiet:       var(--wa-color-danger-80);


  /* Surfaces — dark slate backgrounds */
  --wa-color-surface-base:    var(--wa-color-neutral-10);   /* Slate Dark    */
  --wa-color-surface-default: var(--wa-color-neutral-20);   /* form controls */
  --wa-color-surface-raised:  var(--wa-color-neutral-20);   /* Slate Medium  */
  --wa-color-surface-lowered: var(--wa-color-neutral-0);
  --wa-color-surface-overlay: rgba(0, 0, 0, 0.6);
  --wa-color-surface-border:  var(--wa-color-neutral-20);

  /* Overlays */
  --wa-color-overlay-modal:  color-mix(in oklab, black 60%, transparent);
  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent);

  /* Shadow color */
  --wa-color-shadow: color-mix(
    in oklab,
    var(--wa-color-surface-lowered) calc(var(--wa-shadow-blur-scale) * 32% + 40%),
    transparent
  );


  /* Text — light on dark */
  --wa-color-text:           var(--wa-color-neutral-90);
  --wa-color-text-normal:    var(--wa-color-neutral-90);    /* WA 3.2 form labels/values */
  --wa-color-text-quiet:     var(--wa-color-neutral-60);    /* WA 3.2 hints/secondary    */
  --wa-color-text-link:      var(--wa-color-brand-60);      /* WA 3.2 link color         */
  --wa-color-text-secondary: var(--wa-color-neutral-60);
  --wa-color-text-tertiary:  var(--wa-color-neutral-50);
  --wa-color-text-inverse:   var(--wa-color-neutral-10);
  --wa-color-text-brand:     var(--wa-color-brand-60);


  /* Generic variant defaults (re-inherit from flipped neutrals) */
  --wa-color-fill-loud:      var(--wa-color-neutral-fill-loud);
  --wa-color-fill-moderate:  var(--wa-color-neutral-fill-moderate);
  --wa-color-fill-normal:    var(--wa-color-neutral-fill-normal);
  --wa-color-fill-quiet:     var(--wa-color-neutral-fill-quiet);
  --wa-color-border-loud:    var(--wa-color-neutral-border-loud);
  --wa-color-border-moderate:var(--wa-color-neutral-border-moderate);
  --wa-color-border-normal:  var(--wa-color-neutral-border-normal);
  --wa-color-border-quiet:   var(--wa-color-neutral-border-quiet);
  --wa-color-on-loud:        var(--wa-color-neutral-on-loud);
  --wa-color-on-moderate:    var(--wa-color-neutral-on-moderate);
  --wa-color-on-normal:      var(--wa-color-neutral-on-normal);
  --wa-color-on-quiet:       var(--wa-color-neutral-on-quiet);


  /* Hover / active state mixing */
  --wa-color-mix-hover:  black 8%;
  --wa-color-mix-active: black 16%;


  /* Shadows shift darker */
  --shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);

  /* Native form controls use lighter brand tint on dark backgrounds */
  accent-color: var(--wa-color-brand-50);
  color-scheme: dark;
}

/* ─── Dark-mode element overrides ──────────────────────────────────────── */

[data-theme="dark"] mark,
.wa-dark mark {
  background: var(--wa-color-warning-20);
  color: var(--wa-color-warning-90);
}

[data-theme="dark"] blockquote,
.wa-dark blockquote {
  background: var(--wa-color-brand-20);
}


/* ==========================================================================
   BASE STYLES
   ========================================================================== */

*:not(wa-*):not([slot]),
*:not(wa-*)::before,
*:not(wa-*)::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--wa-font-weight-normal);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  accent-color: var(--wa-color-brand-fill-loud);
  color-scheme: light;  /* dark mode sets 'dark' via [data-theme="dark"]/.wa-dark */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ==========================================================================
   HEADINGS — IBM Plex Serif

   The `body` descendant combinator raises specificity to (0,0,2) so these
   rules beat the Web Awesome kit's injected (0,0,1) heading defaults.
   Line-heights per brand-guide type scale (§ 06 Typography).
   ========================================================================== */

body :is(h1, h2, h3, h4, h5, h6) {
  letter-spacing: var(--wa-letter-spacing-dense);
  text-wrap: balance;
}

body h1 { font-family: var(--font-family-heading);    font-size: var(--wa-font-size-3xl); line-height: 1.15; font-weight: 400; }
body h2 { font-family: var(--font-family-heading);    font-size: var(--wa-font-size-2xl); line-height: 1.2;  font-weight: 400; }
body h3 { font-family: var(--font-family);            font-size: var(--wa-font-size-xl);  line-height: 1.25; font-weight: 500; }
body h4 { font-family: var(--font-family);            font-size: var(--wa-font-size-l);   line-height: 1.3;  font-weight: 600; }
body h5 { font-family: var(--font-family-condensed);  font-size: var(--wa-font-size-m);   line-height: 1.3;  font-weight: 700; text-transform: uppercase; }
body h6 { font-family: var(--font-family-condensed);  font-size: var(--wa-font-size-s);   line-height: 1.4;  font-weight: 700; text-transform: uppercase; }


/* ==========================================================================
   CODE — IBM Plex Mono
   ========================================================================== */

code, kbd, samp, pre {
  font-family: var(--font-family-mono);
  font-size: var(--wa-font-size-s);
}

pre {
  line-height: var(--wa-line-height-loose);
  overflow-x: auto;
}


/* ==========================================================================
   LINKS
   ========================================================================== */

a {
  color: var(--wa-color-text-brand);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}


/* ==========================================================================
   BUTTONS
   ========================================================================== */

button:not([part]) {
  font-family: var(--font-family);
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  font-size: inherit;
}


/* ==========================================================================
   11. HTML ELEMENTS — Sensible defaults for standard elements

   All rules target bare elements only. Web Awesome components use Shadow DOM
   so these styles cannot leak into wa-* internals.
   ========================================================================== */


/* ─── Paragraphs ──────────────────────────────────────────────────────────── */

p {
  margin-bottom: var(--spacing-md);
  line-height: var(--line-height-normal);
}


/* ─── Lists ───────────────────────────────────────────────────────────────── */

ul, ol {
  margin: 0 0 var(--spacing-md) var(--spacing-lg);
  line-height: var(--line-height-normal);
  font-family: var(--font-family-condensed);
}

li {
  margin-bottom: var(--spacing-xs);
}


/* ─── Tables ──────────────────────────────────────────────────────────────── */

table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-md) 0 var(--spacing-lg);
  font-size: var(--wa-font-size-s);
}

th {
  font-family: var(--font-family-condensed);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--wa-font-size-2xs);
  letter-spacing: var(--letter-spacing-caps);
  color: var(--wa-color-text-brand);
  text-align: left;
  padding: var(--spacing-sm) var(--spacing-sm);
  border-bottom: var(--border-width-medium) solid var(--wa-color-neutral-border-quiet);
}

td {
  padding: var(--spacing-sm) var(--spacing-sm);
  border-bottom: var(--border-width-thin) solid var(--wa-color-neutral-border-quiet);
  vertical-align: top;
}


/* ─── Blockquote ──────────────────────────────────────────────────────────── */

blockquote {
  background: var(--wa-color-brand-90);
  border-left: 3px solid var(--wa-color-brand-40);
  padding: var(--spacing-md) var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

blockquote p:last-child {
  margin-bottom: 0;
}


/* ─── Horizontal rule ─────────────────────────────────────────────────────── */

hr {
  border: none;
  border-top: var(--border-width-thin) solid var(--wa-color-neutral-border-quiet);
  margin: var(--spacing-xl) 0;
}


/* ─── Inline text ─────────────────────────────────────────────────────────── */

strong, b {
  font-weight: var(--wa-font-weight-semibold);
  color: var(--wa-color-text);
}

em, i {
  font-style: italic;
}

small {
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-text-secondary);
}

mark {
  background: var(--wa-color-warning-90);
  padding: 0.1em 0.3em;
  border-radius: var(--radius-sm);
}

abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup { top: -0.5em; }
sub { bottom: -0.25em; }


/* ─── Code (enhanced) ─────────────────────────────────────────────────────── */

pre {
  background: var(--wa-color-surface-lowered);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
}

code:not(pre code) {
  background: var(--wa-color-surface-lowered);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
}


/* ─── Figures ─────────────────────────────────────────────────────────────── */

figure {
  margin: 0 0 var(--spacing-lg);
}

figcaption {
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-text-secondary);
  margin-top: var(--spacing-sm);
}


/* ─── Definition lists ────────────────────────────────────────────────────── */

dl {
  margin-bottom: var(--spacing-lg);
}

dt {
  font-weight: var(--wa-font-weight-semibold);
}

dd {
  margin-left: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
}


/* ─── Images ──────────────────────────────────────────────────────────────── */

img {
  max-width: 100%;
  height: auto;
  display: block;
}


/* ==========================================================================
   WA COMPONENT THEMING
   Override Web Awesome component styling to match the snglst palette.
   Uses CSS custom properties and ::part() selectors where appropriate.
   ========================================================================== */

/* ─── Breadcrumb ─────────────────────────────────────────────────────────── */

wa-breadcrumb {
  font-family: var(--font-family-condensed);
  font-size: var(--wa-font-size-xs);
  letter-spacing: 0.05em;
}
wa-breadcrumb-item::part(label) {
  text-transform: uppercase;
}

/* ─── Rating ─────────────────────────────────────────────────────────────── */

wa-rating {
  --symbol-color-active: var(--wa-color-brand-40);
}
wa-rating[disabled] {
  --symbol-color-active: var(--wa-color-neutral-50);
}

/* ─── Divider ────────────────────────────────────────────────────────────── */

wa-divider {
  --color: var(--wa-color-neutral-border-quiet);
  --width: 1px;
  --spacing: 1rem;
}


/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   BRAND ICON — snglst logo (fa-kit fa-snglst-logo)

   The mic/nib glyph sits high in its em box. Nudge it down so the base of
   the microphone (top of the pen nib) visually rests on the text baseline.
   Apply universally — no extra class needed.
   ========================================================================== */

.fa-snglst-logo {
  vertical-align: -0.15em;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
}