/* ==========================================================================
   bivens.dev — Unified Material 3 Houdini Token System
   Baseline Theme: Oxford & Slate (#1B365D • SchemeNeutral)
   Contrast Architecture:
     • Default (prefers-contrast: no-preference): contrastLevel +0.15
     • @media (prefers-contrast: more): contrastLevel +0.70
     • @media (prefers-contrast: less): contrastLevel -0.25
   ========================================================================== */

@layer md.ref, md.sys;

/* --------------------------------------------------------------------------
   1. Reference Tokens: Typography & Active HCT Palettes (@layer md.ref)
   -------------------------------------------------------------------------- */
@layer md.ref {
  @property --md-ref-typeface-brand {
    syntax: "*";
    inherits: true;
    initial-value: "Playfair Display", Georgia, serif;
  }
  @property --md-ref-typeface-plain {
    syntax: "*";
    inherits: true;
    initial-value: "Open Sans", system-ui, sans-serif;
  }
  @property --md-ref-typeface-mono {
    syntax: "*";
    inherits: true;
    initial-value: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  }
  @property --md-ref-typeface-weight-regular {
    syntax: "<number>";
    inherits: true;
    initial-value: 400;
  }
  @property --md-ref-typeface-weight-medium {
    syntax: "<number>";
    inherits: true;
    initial-value: 500;
  }
  @property --md-ref-typeface-weight-bold {
    syntax: "<number>";
    inherits: true;
    initial-value: 700;
  }

  :root {
    /* Primary Palette — Oxford Slate (Hue 259°, Chroma 12) */
    --md-ref-palette-primary-seed: #1b365d;
    --md-ref-palette-primary-0: #000000;
    --md-ref-palette-primary-4: #080e19;
    --md-ref-palette-primary-8: #121823;
    --md-ref-palette-primary-15: #202631;
    --md-ref-palette-primary-18: #262c38;
    --md-ref-palette-primary-21: #2d333e;
    --md-ref-palette-primary-22: #2f3541;
    --md-ref-palette-primary-24: #333945;
    --md-ref-palette-primary-31: #434956;
    --md-ref-palette-primary-35: #4c535f;
    --md-ref-palette-primary-38: #545a67;
    --md-ref-palette-primary-39: #565c69;
    --md-ref-palette-primary-42: #5d6370;
    --md-ref-palette-primary-43: #606673;
    --md-ref-palette-primary-45: #656b78;
    --md-ref-palette-primary-60: #8b919f;
    --md-ref-palette-primary-64: #959baa;
    --md-ref-palette-primary-65: #989eac;
    --md-ref-palette-primary-68: #a0a6b4;
    --md-ref-palette-primary-69: #a3a8b7;
    --md-ref-palette-primary-80: #c1c6d6;
    --md-ref-palette-primary-87: #d4dae9;
    --md-ref-palette-primary-91: #e0e5f5;
    --md-ref-palette-primary-95: #ecf0ff;
    --md-ref-palette-primary-97: #f5f6ff;
    --md-ref-palette-primary-100: #ffffff;

    /* Secondary Palette — Quiet Slate (Hue 259°, Chroma 8) */
    --md-ref-palette-secondary-seed: #5b5e66;
    --md-ref-palette-secondary-0: #000000;
    --md-ref-palette-secondary-4: #0b0e15;
    --md-ref-palette-secondary-8: #14181e;
    --md-ref-palette-secondary-18: #292c33;
    --md-ref-palette-secondary-21: #2f333a;
    --md-ref-palette-secondary-24: #363941;
    --md-ref-palette-secondary-35: #4f525a;
    --md-ref-palette-secondary-39: #595c64;
    --md-ref-palette-secondary-42: #60636b;
    --md-ref-palette-secondary-43: #63666e;
    --md-ref-palette-secondary-64: #989ba4;
    --md-ref-palette-secondary-65: #9b9ea7;
    --md-ref-palette-secondary-68: #a3a6af;
    --md-ref-palette-secondary-69: #a6a8b1;
    --md-ref-palette-secondary-80: #c4c6cf;
    --md-ref-palette-secondary-87: #d8dae3;
    --md-ref-palette-secondary-91: #e3e5ef;
    --md-ref-palette-secondary-100: #ffffff;

    /* Tertiary Palette — Deep Steel Accent (Hue 259°, Chroma 16) */
    --md-ref-palette-tertiary-seed: #555f71;
    --md-ref-palette-tertiary-0: #000000;
    --md-ref-palette-tertiary-4: #050e1d;
    --md-ref-palette-tertiary-8: #0e1827;
    --md-ref-palette-tertiary-18: #232c3d;
    --md-ref-palette-tertiary-21: #2a3343;
    --md-ref-palette-tertiary-24: #30394a;
    --md-ref-palette-tertiary-35: #495365;
    --md-ref-palette-tertiary-39: #535c6e;
    --md-ref-palette-tertiary-42: #5a6376;
    --md-ref-palette-tertiary-43: #5d6678;
    --md-ref-palette-tertiary-64: #929bb0;
    --md-ref-palette-tertiary-65: #959eb2;
    --md-ref-palette-tertiary-68: #9da6ba;
    --md-ref-palette-tertiary-69: #9fa9bd;
    --md-ref-palette-tertiary-80: #bdc7dc;
    --md-ref-palette-tertiary-87: #d1daf0;
    --md-ref-palette-tertiary-91: #dce5fb;
    --md-ref-palette-tertiary-100: #ffffff;

    /* Neutral Palette — Archival Paper & Ink Surfaces (Hue 259°, Chroma 2) */
    --md-ref-palette-neutral-seed: #1b1b1d;
    --md-ref-palette-neutral-0: #000000;
    --md-ref-palette-neutral-1: #030404;
    --md-ref-palette-neutral-3: #0b0b0c;
    --md-ref-palette-neutral-4: #0e0e0f;
    --md-ref-palette-neutral-6: #131315;
    --md-ref-palette-neutral-10: #1b1b1d;
    --md-ref-palette-neutral-11: #1d1d1f;
    --md-ref-palette-neutral-12: #1f1f21;
    --md-ref-palette-neutral-13: #212123;
    --md-ref-palette-neutral-17: #2a2a2b;
    --md-ref-palette-neutral-18: #2c2c2d;
    --md-ref-palette-neutral-20: #303032;
    --md-ref-palette-neutral-22: #353536;
    --md-ref-palette-neutral-23: #373738;
    --md-ref-palette-neutral-24: #39393a;
    --md-ref-palette-neutral-25: #3b3b3d;
    --md-ref-palette-neutral-28: #424243;
    --md-ref-palette-neutral-31: #49494a;
    --md-ref-palette-neutral-33: #4e4d4f;
    --md-ref-palette-neutral-74: #b7b5b7;
    --md-ref-palette-neutral-78: #c2c0c2;
    --md-ref-palette-neutral-82: #cecbcd;
    --md-ref-palette-neutral-85: #d6d4d5;
    --md-ref-palette-neutral-87: #dcd9db;
    --md-ref-palette-neutral-88: #dfdcdd;
    --md-ref-palette-neutral-90: #e4e2e3;
    --md-ref-palette-neutral-91: #e7e4e6;
    --md-ref-palette-neutral-92: #eae7e9;
    --md-ref-palette-neutral-93: #edeaec;
    --md-ref-palette-neutral-94: #f0edee;
    --md-ref-palette-neutral-95: #f3f0f1;
    --md-ref-palette-neutral-96: #f6f3f4;
    --md-ref-palette-neutral-98: #fbf8fa;
    --md-ref-palette-neutral-100: #ffffff;

    /* Neutral Variant Palette — Hairlines & Dividers (Hue 259°, Chroma 2) */
    --md-ref-palette-neutral-variant-seed: #474648;
    --md-ref-palette-neutral-variant-14: #232425;
    --md-ref-palette-neutral-variant-24: #39393a;
    --md-ref-palette-neutral-variant-28: #424243;
    --md-ref-palette-neutral-variant-30: #474648;
    --md-ref-palette-neutral-variant-39: #5c5c5d;
    --md-ref-palette-neutral-variant-43: #666567;
    --md-ref-palette-neutral-variant-46: #6e6d6e;
    --md-ref-palette-neutral-variant-51: #7a797b;
    --md-ref-palette-neutral-variant-55: #858385;
    --md-ref-palette-neutral-variant-60: #929092;
    --md-ref-palette-neutral-variant-64: #9c9b9c;
    --md-ref-palette-neutral-variant-68: #a7a5a7;
    --md-ref-palette-neutral-variant-69: #aaa8a9;
    --md-ref-palette-neutral-variant-80: #c8c6c7;
    --md-ref-palette-neutral-variant-82: #cecbcd;
    --md-ref-palette-neutral-variant-87: #dcd9db;
    --md-ref-palette-neutral-variant-90: #e4e2e3;
    --md-ref-palette-neutral-variant-99: #fefbfd;

    /* Error Palette — Semantic Validation (Hue 25°, Chroma 84) */
    --md-ref-palette-error-seed: #ba1a1a;
    --md-ref-palette-error-0: #000000;
    --md-ref-palette-error-4: #280001;
    --md-ref-palette-error-8: #390001;
    --md-ref-palette-error-18: #600004;
    --md-ref-palette-error-21: #6d0005;
    --md-ref-palette-error-24: #790006;
    --md-ref-palette-error-35: #a80710;
    --md-ref-palette-error-39: #b61718;
    --md-ref-palette-error-42: #c1211f;
    --md-ref-palette-error-43: #c52421;
    --md-ref-palette-error-64: #ff6c5f;
    --md-ref-palette-error-65: #ff7164;
    --md-ref-palette-error-68: #ff8073;
    --md-ref-palette-error-69: #ff8578;
    --md-ref-palette-error-80: #ffb4ab;
    --md-ref-palette-error-87: #ffcfc9;
    --md-ref-palette-error-91: #ffdeda;
    --md-ref-palette-error-100: #ffffff;

  }
}

/* --------------------------------------------------------------------------
   2. System Color Roles & Houdini @property Registrations (@layer md.sys)
   -------------------------------------------------------------------------- */
@layer md.sys {
  @property --md-sys-color-primary {
    syntax: "<color>";
    inherits: true;
    initial-value: #4c535f;
  }
  @property --md-sys-color-on-primary {
    syntax: "<color>";
    inherits: true;
    initial-value: #ffffff;
  }
  @property --md-sys-color-primary-container {
    syntax: "<color>";
    inherits: true;
    initial-value: #a3a8b7;
  }
  @property --md-sys-color-on-primary-container {
    syntax: "<color>";
    inherits: true;
    initial-value: #2d333e;
  }
  @property --md-sys-color-inverse-primary {
    syntax: "<color>";
    inherits: true;
    initial-value: #c1c6d6;
  }
  @property --md-sys-color-secondary {
    syntax: "<color>";
    inherits: true;
    initial-value: #4f525a;
  }
  @property --md-sys-color-on-secondary {
    syntax: "<color>";
    inherits: true;
    initial-value: #ffffff;
  }
  @property --md-sys-color-secondary-container {
    syntax: "<color>";
    inherits: true;
    initial-value: #a6a8b1;
  }
  @property --md-sys-color-on-secondary-container {
    syntax: "<color>";
    inherits: true;
    initial-value: #2f333a;
  }
  @property --md-sys-color-tertiary {
    syntax: "<color>";
    inherits: true;
    initial-value: #495365;
  }
  @property --md-sys-color-on-tertiary {
    syntax: "<color>";
    inherits: true;
    initial-value: #ffffff;
  }
  @property --md-sys-color-tertiary-container {
    syntax: "<color>";
    inherits: true;
    initial-value: #9fa9bd;
  }
  @property --md-sys-color-on-tertiary-container {
    syntax: "<color>";
    inherits: true;
    initial-value: #2a3343;
  }
  @property --md-sys-color-error {
    syntax: "<color>";
    inherits: true;
    initial-value: #a80710;
  }
  @property --md-sys-color-on-error {
    syntax: "<color>";
    inherits: true;
    initial-value: #ffffff;
  }
  @property --md-sys-color-error-container {
    syntax: "<color>";
    inherits: true;
    initial-value: #ff8578;
  }
  @property --md-sys-color-on-error-container {
    syntax: "<color>";
    inherits: true;
    initial-value: #6d0005;
  }
  @property --md-sys-color-surface {
    syntax: "<color>";
    inherits: true;
    initial-value: #fbf8fa;
  }
  @property --md-sys-color-surface-dim {
    syntax: "<color>";
    inherits: true;
    initial-value: #d6d4d5;
  }
  @property --md-sys-color-surface-bright {
    syntax: "<color>";
    inherits: true;
    initial-value: #fbf8fa;
  }
  @property --md-sys-color-surface-container-lowest {
    syntax: "<color>";
    inherits: true;
    initial-value: #ffffff;
  }
  @property --md-sys-color-surface-container-low {
    syntax: "<color>";
    inherits: true;
    initial-value: #f6f3f4;
  }
  @property --md-sys-color-surface-container {
    syntax: "<color>";
    inherits: true;
    initial-value: #edeaec;
  }
  @property --md-sys-color-surface-container-high {
    syntax: "<color>";
    inherits: true;
    initial-value: #e7e4e6;
  }
  @property --md-sys-color-surface-container-highest {
    syntax: "<color>";
    inherits: true;
    initial-value: #dfdcdd;
  }
  @property --md-sys-color-on-surface {
    syntax: "<color>";
    inherits: true;
    initial-value: #1b1b1d;
  }
  @property --md-sys-color-inverse-surface {
    syntax: "<color>";
    inherits: true;
    initial-value: #303032;
  }
  @property --md-sys-color-inverse-on-surface {
    syntax: "<color>";
    inherits: true;
    initial-value: #f3f0f1;
  }
  @property --md-sys-color-surface-variant {
    syntax: "<color>";
    inherits: true;
    initial-value: #e4e2e3;
  }
  @property --md-sys-color-on-surface-variant {
    syntax: "<color>";
    inherits: true;
    initial-value: #474648;
  }
  @property --md-sys-color-outline {
    syntax: "<color>";
    inherits: true;
    initial-value: #6e6d6e;
  }
  @property --md-sys-color-outline-variant {
    syntax: "<color>";
    inherits: true;
    initial-value: #aaa8a9;
  }
  @property --md-sys-color-shadow {
    syntax: "<color>";
    inherits: true;
    initial-value: #000000;
  }
  @property --md-sys-color-scrim {
    syntax: "<color>";
    inherits: true;
    initial-value: #000000;
  }

  /* ------------------------------------------------------------------------
     3. Default Contrast Tier (prefers-contrast: no-preference • +0.15)
     ------------------------------------------------------------------------ */
  :root {
    color-scheme: light dark;

    --md-sys-color-primary: light-dark(var(--md-ref-palette-primary-35), var(--md-ref-palette-primary-80));
    --md-sys-color-on-primary: light-dark(var(--md-ref-palette-primary-100), var(--md-ref-palette-primary-18));
    --md-sys-color-primary-container: light-dark(var(--md-ref-palette-primary-69), var(--md-ref-palette-primary-39));
    --md-sys-color-on-primary-container: light-dark(var(--md-ref-palette-primary-21), var(--md-ref-palette-primary-91));
    --md-sys-color-inverse-primary: light-dark(var(--md-ref-palette-primary-80), var(--md-ref-palette-primary-38));
    --md-sys-color-secondary: light-dark(var(--md-ref-palette-secondary-35), var(--md-ref-palette-secondary-80));
    --md-sys-color-on-secondary: light-dark(var(--md-ref-palette-secondary-100), var(--md-ref-palette-secondary-18));
    --md-sys-color-secondary-container: light-dark(var(--md-ref-palette-secondary-69), var(--md-ref-palette-secondary-39));
    --md-sys-color-on-secondary-container: light-dark(var(--md-ref-palette-secondary-21), var(--md-ref-palette-secondary-91));
    --md-sys-color-tertiary: light-dark(var(--md-ref-palette-tertiary-35), var(--md-ref-palette-tertiary-80));
    --md-sys-color-on-tertiary: light-dark(var(--md-ref-palette-tertiary-100), var(--md-ref-palette-tertiary-18));
    --md-sys-color-tertiary-container: light-dark(var(--md-ref-palette-tertiary-69), var(--md-ref-palette-tertiary-39));
    --md-sys-color-on-tertiary-container: light-dark(var(--md-ref-palette-tertiary-21), var(--md-ref-palette-tertiary-91));
    --md-sys-color-error: light-dark(var(--md-ref-palette-error-35), var(--md-ref-palette-error-80));
    --md-sys-color-on-error: light-dark(var(--md-ref-palette-error-100), var(--md-ref-palette-error-18));
    --md-sys-color-error-container: light-dark(var(--md-ref-palette-error-69), var(--md-ref-palette-error-39));
    --md-sys-color-on-error-container: light-dark(var(--md-ref-palette-error-21), var(--md-ref-palette-error-91));
    --md-sys-color-surface: light-dark(var(--md-ref-palette-neutral-98), var(--md-ref-palette-neutral-6));
    --md-sys-color-surface-dim: light-dark(var(--md-ref-palette-neutral-85), var(--md-ref-palette-neutral-6));
    --md-sys-color-surface-bright: light-dark(var(--md-ref-palette-neutral-98), var(--md-ref-palette-neutral-25));
    --md-sys-color-surface-container-lowest: light-dark(var(--md-ref-palette-neutral-100), var(--md-ref-palette-neutral-3));
    --md-sys-color-surface-container-low: light-dark(var(--md-ref-palette-neutral-96), var(--md-ref-palette-neutral-10));
    --md-sys-color-surface-container: light-dark(var(--md-ref-palette-neutral-93), var(--md-ref-palette-neutral-13));
    --md-sys-color-surface-container-high: light-dark(var(--md-ref-palette-neutral-91), var(--md-ref-palette-neutral-18));
    --md-sys-color-surface-container-highest: light-dark(var(--md-ref-palette-neutral-88), var(--md-ref-palette-neutral-23));
    --md-sys-color-on-surface: light-dark(var(--md-ref-palette-neutral-10), var(--md-ref-palette-neutral-90));
    --md-sys-color-inverse-surface: light-dark(var(--md-ref-palette-neutral-20), var(--md-ref-palette-neutral-90));
    --md-sys-color-inverse-on-surface: light-dark(var(--md-ref-palette-neutral-95), var(--md-ref-palette-neutral-20));
    --md-sys-color-surface-variant: light-dark(var(--md-ref-palette-neutral-variant-90), var(--md-ref-palette-neutral-variant-30));
    --md-sys-color-on-surface-variant: light-dark(var(--md-ref-palette-neutral-variant-30), var(--md-ref-palette-neutral-variant-80));
    --md-sys-color-outline: light-dark(var(--md-ref-palette-neutral-variant-46), var(--md-ref-palette-neutral-variant-60));
    --md-sys-color-outline-variant: light-dark(var(--md-ref-palette-neutral-variant-69), var(--md-ref-palette-neutral-variant-39));
    --md-sys-color-shadow: light-dark(var(--md-ref-palette-neutral-0), var(--md-ref-palette-neutral-0));
    --md-sys-color-scrim: light-dark(var(--md-ref-palette-neutral-0), var(--md-ref-palette-neutral-0));
  }

  /* ------------------------------------------------------------------------
     4. High Contrast Tier (@media (prefers-contrast: more) • +0.70)
     ------------------------------------------------------------------------ */
  @media (prefers-contrast: more) {
    :root {
      --md-sys-color-primary: light-dark(var(--md-ref-palette-primary-21), var(--md-ref-palette-primary-91));
      --md-sys-color-on-primary: light-dark(var(--md-ref-palette-primary-100), var(--md-ref-palette-primary-4));
      --md-sys-color-primary-container: light-dark(var(--md-ref-palette-primary-39), var(--md-ref-palette-primary-68));
      --md-sys-color-on-primary-container: light-dark(var(--md-ref-palette-primary-100), var(--md-ref-palette-primary-0));
      --md-sys-color-inverse-primary: light-dark(var(--md-ref-palette-primary-80), var(--md-ref-palette-primary-31));
      --md-sys-color-secondary: light-dark(var(--md-ref-palette-secondary-21), var(--md-ref-palette-secondary-91));
      --md-sys-color-on-secondary: light-dark(var(--md-ref-palette-secondary-100), var(--md-ref-palette-secondary-4));
      --md-sys-color-secondary-container: light-dark(var(--md-ref-palette-secondary-39), var(--md-ref-palette-secondary-68));
      --md-sys-color-on-secondary-container: light-dark(var(--md-ref-palette-secondary-100), var(--md-ref-palette-secondary-0));
      --md-sys-color-tertiary: light-dark(var(--md-ref-palette-tertiary-21), var(--md-ref-palette-tertiary-91));
      --md-sys-color-on-tertiary: light-dark(var(--md-ref-palette-tertiary-100), var(--md-ref-palette-tertiary-4));
      --md-sys-color-tertiary-container: light-dark(var(--md-ref-palette-tertiary-39), var(--md-ref-palette-tertiary-68));
      --md-sys-color-on-tertiary-container: light-dark(var(--md-ref-palette-tertiary-100), var(--md-ref-palette-tertiary-0));
      --md-sys-color-error: light-dark(var(--md-ref-palette-error-21), var(--md-ref-palette-error-91));
      --md-sys-color-on-error: light-dark(var(--md-ref-palette-error-100), var(--md-ref-palette-error-4));
      --md-sys-color-error-container: light-dark(var(--md-ref-palette-error-39), var(--md-ref-palette-error-68));
      --md-sys-color-on-error-container: light-dark(var(--md-ref-palette-error-100), var(--md-ref-palette-error-0));
      --md-sys-color-surface: light-dark(var(--md-ref-palette-neutral-98), var(--md-ref-palette-neutral-6));
      --md-sys-color-surface-dim: light-dark(var(--md-ref-palette-neutral-78), var(--md-ref-palette-neutral-6));
      --md-sys-color-surface-bright: light-dark(var(--md-ref-palette-neutral-98), var(--md-ref-palette-neutral-31));
      --md-sys-color-surface-container-lowest: light-dark(var(--md-ref-palette-neutral-100), var(--md-ref-palette-neutral-1));
      --md-sys-color-surface-container-low: light-dark(var(--md-ref-palette-neutral-96), var(--md-ref-palette-neutral-11));
      --md-sys-color-surface-container: light-dark(var(--md-ref-palette-neutral-91), var(--md-ref-palette-neutral-18));
      --md-sys-color-surface-container-high: light-dark(var(--md-ref-palette-neutral-87), var(--md-ref-palette-neutral-23));
      --md-sys-color-surface-container-highest: light-dark(var(--md-ref-palette-neutral-82), var(--md-ref-palette-neutral-28));
      --md-sys-color-on-surface: light-dark(var(--md-ref-palette-neutral-0), var(--md-ref-palette-neutral-100));
      --md-sys-color-inverse-surface: light-dark(var(--md-ref-palette-neutral-20), var(--md-ref-palette-neutral-90));
      --md-sys-color-inverse-on-surface: light-dark(var(--md-ref-palette-neutral-100), var(--md-ref-palette-neutral-3));
      --md-sys-color-surface-variant: light-dark(var(--md-ref-palette-neutral-variant-90), var(--md-ref-palette-neutral-variant-30));
      --md-sys-color-on-surface-variant: light-dark(var(--md-ref-palette-neutral-variant-14), var(--md-ref-palette-neutral-variant-99));
      --md-sys-color-outline: light-dark(var(--md-ref-palette-neutral-variant-28), var(--md-ref-palette-neutral-variant-82));
      --md-sys-color-outline-variant: light-dark(var(--md-ref-palette-neutral-variant-39), var(--md-ref-palette-neutral-variant-68));
      --md-sys-color-shadow: light-dark(var(--md-ref-palette-neutral-0), var(--md-ref-palette-neutral-0));
      --md-sys-color-scrim: light-dark(var(--md-ref-palette-neutral-0), var(--md-ref-palette-neutral-0));
    }
  }

  /* ------------------------------------------------------------------------
     5. Soft / Reduced Contrast Tier (@media (prefers-contrast: less) • -0.25)
     ------------------------------------------------------------------------ */
  @media (prefers-contrast: less) {
    :root {
      --md-sys-color-primary: light-dark(var(--md-ref-palette-primary-43), var(--md-ref-palette-primary-64));
      --md-sys-color-on-primary: light-dark(var(--md-ref-palette-primary-100), var(--md-ref-palette-primary-8));
      --md-sys-color-primary-container: light-dark(var(--md-ref-palette-primary-87), var(--md-ref-palette-primary-24));
      --md-sys-color-on-primary-container: light-dark(var(--md-ref-palette-primary-42), var(--md-ref-palette-primary-65));
      --md-sys-color-inverse-primary: light-dark(var(--md-ref-palette-primary-60), var(--md-ref-palette-primary-45));
      --md-sys-color-secondary: light-dark(var(--md-ref-palette-secondary-43), var(--md-ref-palette-secondary-64));
      --md-sys-color-on-secondary: light-dark(var(--md-ref-palette-secondary-100), var(--md-ref-palette-secondary-8));
      --md-sys-color-secondary-container: light-dark(var(--md-ref-palette-secondary-87), var(--md-ref-palette-secondary-24));
      --md-sys-color-on-secondary-container: light-dark(var(--md-ref-palette-secondary-42), var(--md-ref-palette-secondary-65));
      --md-sys-color-tertiary: light-dark(var(--md-ref-palette-tertiary-43), var(--md-ref-palette-tertiary-64));
      --md-sys-color-on-tertiary: light-dark(var(--md-ref-palette-tertiary-100), var(--md-ref-palette-tertiary-8));
      --md-sys-color-tertiary-container: light-dark(var(--md-ref-palette-tertiary-87), var(--md-ref-palette-tertiary-24));
      --md-sys-color-on-tertiary-container: light-dark(var(--md-ref-palette-tertiary-42), var(--md-ref-palette-tertiary-65));
      --md-sys-color-error: light-dark(var(--md-ref-palette-error-43), var(--md-ref-palette-error-64));
      --md-sys-color-on-error: light-dark(var(--md-ref-palette-error-100), var(--md-ref-palette-error-8));
      --md-sys-color-error-container: light-dark(var(--md-ref-palette-error-87), var(--md-ref-palette-error-24));
      --md-sys-color-on-error-container: light-dark(var(--md-ref-palette-error-42), var(--md-ref-palette-error-65));
      --md-sys-color-surface: light-dark(var(--md-ref-palette-neutral-98), var(--md-ref-palette-neutral-6));
      --md-sys-color-surface-dim: light-dark(var(--md-ref-palette-neutral-87), var(--md-ref-palette-neutral-6));
      --md-sys-color-surface-bright: light-dark(var(--md-ref-palette-neutral-98), var(--md-ref-palette-neutral-24));
      --md-sys-color-surface-container-lowest: light-dark(var(--md-ref-palette-neutral-100), var(--md-ref-palette-neutral-4));
      --md-sys-color-surface-container-low: light-dark(var(--md-ref-palette-neutral-96), var(--md-ref-palette-neutral-10));
      --md-sys-color-surface-container: light-dark(var(--md-ref-palette-neutral-94), var(--md-ref-palette-neutral-12));
      --md-sys-color-surface-container-high: light-dark(var(--md-ref-palette-neutral-92), var(--md-ref-palette-neutral-17));
      --md-sys-color-surface-container-highest: light-dark(var(--md-ref-palette-neutral-90), var(--md-ref-palette-neutral-22));
      --md-sys-color-on-surface: light-dark(var(--md-ref-palette-neutral-31), var(--md-ref-palette-neutral-78));
      --md-sys-color-inverse-surface: light-dark(var(--md-ref-palette-neutral-20), var(--md-ref-palette-neutral-90));
      --md-sys-color-inverse-on-surface: light-dark(var(--md-ref-palette-neutral-74), var(--md-ref-palette-neutral-33));
      --md-sys-color-surface-variant: light-dark(var(--md-ref-palette-neutral-variant-90), var(--md-ref-palette-neutral-variant-30));
      --md-sys-color-on-surface-variant: light-dark(var(--md-ref-palette-neutral-variant-43), var(--md-ref-palette-neutral-variant-64));
      --md-sys-color-outline: light-dark(var(--md-ref-palette-neutral-variant-55), var(--md-ref-palette-neutral-variant-51));
      --md-sys-color-outline-variant: light-dark(var(--md-ref-palette-neutral-variant-87), var(--md-ref-palette-neutral-variant-24));
      --md-sys-color-shadow: light-dark(var(--md-ref-palette-neutral-0), var(--md-ref-palette-neutral-0));
      --md-sys-color-scrim: light-dark(var(--md-ref-palette-neutral-0), var(--md-ref-palette-neutral-0));
    }
  }

  /* ------------------------------------------------------------------------
     6. Color Scheme Override Selectors (Light / Dark Toggle)
     ------------------------------------------------------------------------ */
  :root[data-theme="light"],
  :root:has(> head > meta[name="color-scheme"][content="light"]) {
    color-scheme: light;
  }

  :root[data-theme="dark"],
  :root:has(> head > meta[name="color-scheme"][content="dark"]) {
    color-scheme: dark;
  }

  /* ------------------------------------------------------------------------
     7. Material 3 Typography Scale Utilities
     ------------------------------------------------------------------------ */
  .md-typescale-display-large { font: var(--md-ref-typeface-weight-regular) 3.5625rem/4rem var(--md-ref-typeface-brand); letter-spacing: -0.015625rem; }
  .md-typescale-display-medium { font: var(--md-ref-typeface-weight-regular) 2.8125rem/3.25rem var(--md-ref-typeface-brand); }
  .md-typescale-display-small { font: var(--md-ref-typeface-weight-regular) 2.25rem/2.75rem var(--md-ref-typeface-brand); }
  .md-typescale-headline-large { font: var(--md-ref-typeface-weight-regular) 2rem/2.5rem var(--md-ref-typeface-brand); }
  .md-typescale-headline-medium { font: var(--md-ref-typeface-weight-regular) 1.75rem/2.25rem var(--md-ref-typeface-brand); }
  .md-typescale-headline-small { font: var(--md-ref-typeface-weight-regular) 1.5rem/2rem var(--md-ref-typeface-brand); }
  .md-typescale-title-large { font: var(--md-ref-typeface-weight-regular) 1.375rem/1.75rem var(--md-ref-typeface-plain); }
  .md-typescale-title-medium { font: var(--md-ref-typeface-weight-medium) 1rem/1.5rem var(--md-ref-typeface-plain); letter-spacing: 0.009375rem; }
  .md-typescale-title-small { font: var(--md-ref-typeface-weight-medium) 0.875rem/1.25rem var(--md-ref-typeface-plain); letter-spacing: 0.00625rem; }
  .md-typescale-body-large { font: var(--md-ref-typeface-weight-regular) 1rem/1.5rem var(--md-ref-typeface-plain); letter-spacing: 0.03125rem; }
  .md-typescale-body-medium { font: var(--md-ref-typeface-weight-regular) 0.875rem/1.25rem var(--md-ref-typeface-plain); letter-spacing: 0.015625rem; }
  .md-typescale-body-small { font: var(--md-ref-typeface-weight-regular) 0.75rem/1rem var(--md-ref-typeface-plain); letter-spacing: 0.025rem; }
  .md-typescale-label-large { font: var(--md-ref-typeface-weight-medium) 0.875rem/1.25rem var(--md-ref-typeface-plain); letter-spacing: 0.00625rem; }
  .md-typescale-label-medium { font: var(--md-ref-typeface-weight-medium) 0.75rem/1rem var(--md-ref-typeface-plain); letter-spacing: 0.03125rem; }
  .md-typescale-label-small { font: var(--md-ref-typeface-weight-medium) 0.6875rem/1rem var(--md-ref-typeface-plain); letter-spacing: 0.03125rem; }
}