@layer tokens {
/* ===================================================================
   DESIGN TOKENS — FiveAlarmWeb (single source of truth)

   Canonical token names are the short, un-prefixed ones (--brand, --text,
   --bg-surface, --border ...). Theme blocks below set ONLY tokens — never
   component rules. The legacy --figma-* names are kept as aliases of the
   canonical tokens so existing CSS keeps working while it is migrated.

   Layering:  bootstrap  <  app  <  (unlayered: tenant + page <style>)
   =================================================================== */

/* ========== Canonical tokens (default theme) ========== */
:root {
    /* Typography */
    --ff-base: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    --fs-root: 16px;

    /* Radii */
    --radius-sm: .375rem;
    --radius-md: .5rem;
    --radius-lg: .75rem;

    /* Spacing scale */
    --sp-1: .25rem;
    --sp-2: .5rem;
    --sp-3: .75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;

    /* Layout */
    --ribbon-h: 30px;
    --navbar-h: 72px;

    /* Surfaces */
    --bg-body:       #141313;
    --bg-surface:    #0D0D0D;
    --bg-elev:       var(--bg-surface);
    --bg-subtle:     rgba(255, 255, 255, 0.05);
    --bg-card:       rgba(0, 0, 0, 0.3);
    --bg-card-hover: rgba(255, 255, 255, 0.05);

    /* Text */
    --fg-rgb:        255, 255, 255;   /* channel form of the foreground; use rgba(var(--fg-rgb), a) for translucent text/borders/surfaces */
    --text:          #FFFFFF;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-muted:    rgba(255, 255, 255, 0.4);
    --text-disabled: rgba(255, 255, 255, 0.6);
    --text-on-dark:  #FFFFFF;
    --text-on-brand: #FFFFFF;

    /* Brand */
    --brand:         #A4200D;
    --brand-dark:    #741709;
    --brand-darker:  #3E0C05;
    --brand-2:       #C43C3C;
    --accent:        #D4A017;
    --accent-rgba:   rgba(180, 140, 0, 0.2);

    /* Bootstrap-ish primary / links */
    --primary:       #0D6EFD;
    --primary-weak:  rgba(13, 110, 253, .08);
    --link:          #0D6EFD;
    --link-hover:    #0B5ED7;

    /* Borders */
    --border:        rgba(255, 255, 255, 0.1);
    --border-subtle: rgba(48, 48, 48, 0.25);

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .08);

    /* Glass / effects (theme-neutral names; themes override, light presets set to none) */
    --glass-bg:        rgba(var(--fg-rgb), 0.04);
    --glass-bg-strong: rgba(var(--fg-rgb), 0.08);
    --glass-border:    rgba(var(--fg-rgb), 0.08);
    --glass-blur:      blur(8px);
    --glass-blur-lg:   blur(16px);
    --surface-inverse: #111111;      /* opaque dark panel on any theme (pills, tooltips) */
    --text-strong:     rgba(var(--fg-rgb), 0.95);
    --text-soft:       rgba(var(--fg-rgb), 0.6);
    --radius-pill:     999px;

    /* Sidebar */
    --sidebar-text:   #FFFFFF;
    --sidebar-border: rgba(255, 255, 255, .15);

    /* Buttons */
    --btn-focus-ring: #258cfb;

    /* Cards / accents */
    --card-gradient-start: #B22222;
    --card-gradient-end:   #FF4500;

    /* Payments */
    --paypal-gold: #FFC439;
    --venmo-blue:  #3D95CE;

    /* Transitions */
    --trans-fast: 150ms ease;
}

/* ========== Theme overrides (tokens only) ========== */

html[data-theme="dark"] {
    --bg-body:       #080808;
    --bg-surface:    #030303;
    --bg-card:       rgba(18, 18, 18, 0.92);
    --bg-card-hover: rgba(255, 255, 255, 0.04);
    --text:          #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.70);
    --text-muted:    rgba(255, 255, 255, 0.40);
    --text-disabled: rgba(255, 255, 255, 0.60);
    --brand:         #8899aa;
    --brand-dark:    #667788;
    --brand-darker:  #445566;
    --brand-2:       #99aabb;
    --accent:        #aabbcc;
    --border:        rgba(255, 255, 255, 0.08);
    --border-subtle: rgba(255, 255, 255, 0.04);
    --primary:       #66A3FF;
    --primary-weak:  rgba(102, 163, 255, .12);
    --link:          #66A3FF;
    --link-hover:    #8BB9FF;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, .6);
    --sidebar-border: rgba(255, 255, 255, .12);
    --card-gradient-start: #A61D1D;
    --card-gradient-end:   #E14B20;
}

html[data-theme="slate"] {
    --bg-body:       #1a1f2e;
    --bg-surface:    #131720;
    --bg-card:       rgba(30, 36, 56, 0.6);
    --bg-card-hover: rgba(77, 124, 201, 0.08);
    --text:          #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.80);
    --text-muted:    rgba(255, 255, 255, 0.45);
    --text-disabled: rgba(255, 255, 255, 0.55);
    --brand:         #4d7cc9;
    --brand-dark:    #3a5fa0;
    --brand-darker:  #263f6e;
    --brand-2:       #6b95d8;
    --accent:        #0d9488;
    --border:        rgba(77, 124, 201, 0.22);
}

html[data-theme="firehouse"] {
    --bg-body:       #1a0404;
    --bg-surface:    #0f0202;
    --bg-card:       rgba(60, 6, 6, 0.6);
    --bg-card-hover: rgba(255, 51, 25, 0.08);
    --text:          #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.80);
    --text-muted:    rgba(255, 255, 255, 0.45);
    --text-disabled: rgba(255, 255, 255, 0.55);
    --brand:         #ff3319;
    --brand-dark:    #cc1f08;
    --brand-darker:  #7a1005;
    --brand-2:       #ff6347;
    --accent:        #eab308;
    --border:        rgba(255, 51, 25, 0.3);
}

html[data-theme="midnight"] {
    --bg-body:       #0d0f1a;
    --bg-surface:    #080a12;
    --bg-card:       rgba(20, 24, 50, 0.7);
    --bg-card-hover: rgba(99, 102, 241, 0.1);
    --text:          #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.80);
    --text-muted:    rgba(255, 255, 255, 0.45);
    --text-disabled: rgba(255, 255, 255, 0.55);
    --brand:         #6366f1;
    --brand-dark:    #4f46e5;
    --brand-darker:  #312e81;
    --brand-2:       #818cf8;
    --accent:        #f59e0b;
    --border:        rgba(99, 102, 241, 0.2);
}

html[data-theme="highcontrast"] {
    --bg-body:       #000000;
    --bg-surface:    #000000;
    --bg-card:       #000000;
    --bg-card-hover: #1a1a1a;
    --text:          #ffffff;
    --text-secondary: #ffffff;
    --text-muted:    #dddddd;
    --text-disabled: #aaaaaa;
    --text-on-brand: #000000;
    --brand:         #ffff00;
    --brand-dark:    #cccc00;
    --brand-darker:  #999900;
    --brand-2:       #ffff00;
    --accent:        #ffffff;
    --border:        #ffffff;
    --border-subtle: rgba(255, 255, 255, 0.6);
}

html[data-theme="forest"] {
    --bg-body:       #0d1a10;
    --bg-surface:    #081209;
    --bg-card:       rgba(18, 40, 20, 0.65);
    --bg-card-hover: rgba(52, 160, 90, 0.08);
    --text:          #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.80);
    --text-muted:    rgba(255, 255, 255, 0.45);
    --text-disabled: rgba(255, 255, 255, 0.55);
    --brand:         #34a05a;
    --brand-dark:    #26794a;
    --brand-darker:  #164d2c;
    --brand-2:       #56c478;
    --accent:        #a3c47a;
    --border:        rgba(52, 160, 90, 0.22);
}

html[data-theme="neon"] {
    --bg-body:       #000000;
    --bg-surface:    #030305;
    --bg-card:       rgba(0, 0, 0, 0.85);
    --bg-card-hover: rgba(255, 0, 204, 0.06);
    --text:          #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.75);
    --text-muted:    rgba(255, 255, 255, 0.45);
    --text-disabled: rgba(255, 255, 255, 0.3);
    --brand:         #ff00cc;
    --brand-dark:    #cc0099;
    --brand-darker:  #660050;
    --brand-2:       #ff44dd;
    --accent:        #00fff7;
    --border:        rgba(255, 0, 204, 0.45);
    --border-subtle: rgba(255, 0, 204, 0.15);
}

html[data-theme="light"] {
    --bg-body:       #f5f4f2;
    --bg-surface:    #ffffff;
    --bg-subtle:     #F1F3F5;
    --bg-card:       rgba(255, 255, 255, 0.9);
    --bg-card-hover: rgba(164, 32, 13, 0.04);
    --fg-rgb:        17, 17, 17;
    --text:          #111111;
    --text-secondary: rgba(17, 17, 17, 0.70);
    --text-muted:    rgba(17, 17, 17, 0.45);
    --text-disabled: rgba(17, 17, 17, 0.35);
    --brand:         #A4200D;
    --brand-dark:    #741709;
    --brand-darker:  #3E0C05;
    --brand-2:       #C43C3C;
    --accent:        #9a7200;
    --accent-rgba:   rgba(154, 114, 0, 0.15);
    --border:        rgba(0, 0, 0, 0.12);
    --border-subtle: rgba(0, 0, 0, 0.06);
    --glass-bg:        #ffffff;
    --glass-bg-strong: #f1f3f5;
    --glass-border:    rgba(0, 0, 0, 0.10);
    --glass-blur:      none;
    --glass-blur-lg:   none;
    --surface-inverse: #1e2430;
}

/* ---- Municipal Classic (theme) — white canvas, navy band, red accents, serif masthead.
        Formerly data-layout="municipal"; look tokens only, structure comes from data-layout. ---- */
html[data-theme="municipal"] {
    --muni-navy:      #1b2a4a;
    --muni-navy-dark: #12203a;
    --muni-red:       #b22222;
    --muni-red-dark:  #8e1a1a;
    --muni-gold:      #c9a227;
    --muni-paper:     #ffffff;
    --muni-paper-alt: #f4f5f7;
    --muni-ink:       #1e2430;
    --muni-ink-soft:  #4a5261;

    color-scheme: light;
    --bg-body:       var(--muni-paper);
    --bg-surface:    #f2f4f6;
    --bg-subtle:     var(--muni-paper-alt);
    --bg-card:       #ffffff;
    --bg-card-hover: #f0f2f5;
    --fg-rgb:        30, 36, 48;
    --text:          var(--muni-ink);
    --text-secondary: var(--muni-ink-soft);
    --text-muted:    #6c7484;
    --text-disabled: #9aa1ae;
    --brand:         var(--muni-red);
    --brand-dark:    var(--muni-red-dark);
    --brand-darker:  #5e1010;
    --brand-2:       var(--muni-red);
    --accent:        var(--muni-gold);
    --accent-rgba:   rgba(201, 162, 39, 0.18);
    --border:        #d8dce3;
    --border-subtle: #e7eaef;
    --glass-bg:        #ffffff;
    --glass-bg-strong: #f4f5f7;
    --glass-border:    #d8dce3;
    --glass-blur:      none;
    --glass-blur-lg:   none;
    --surface-inverse: var(--muni-navy);
    --sidebar-text:   #ffffff;
    --sidebar-border: rgba(255, 255, 255, .15);
}

/* ---- Simple (theme) — plain town-government CMS: white, soft grey panels, one steel blue.
        Formerly data-layout="simple". ---- */
html[data-theme="simple"] {
    --smp-blue:      #33608c;
    --smp-blue-dark: #27496b;
    --smp-paper:     #ffffff;
    --smp-panel:     #f2f4f6;
    --smp-ink:       #2b2f36;
    --smp-ink-soft:  #575e68;
    --smp-border:    #d7dbe0;

    color-scheme: light;
    --bg-body:       var(--smp-paper);
    --bg-surface:    var(--smp-panel);
    --bg-subtle:     var(--smp-panel);
    --bg-card:       #ffffff;
    --bg-card-hover: #f0f2f5;
    --fg-rgb:        43, 47, 54;
    --text:          var(--smp-ink);
    --text-secondary: var(--smp-ink-soft);
    --text-muted:    #78808b;
    --text-disabled: #a2a8b1;
    --brand:         var(--smp-blue);
    --brand-dark:    var(--smp-blue-dark);
    --brand-darker:  #1c3650;
    --brand-2:       var(--smp-blue);
    --accent:        var(--smp-blue);
    --accent-rgba:   rgba(51, 96, 140, 0.15);
    --primary:       var(--smp-blue);
    --link:          var(--smp-blue);
    --link-hover:    var(--smp-blue-dark);
    --border:        var(--smp-border);
    --border-subtle: #e6e9ec;
    --glass-bg:        #ffffff;
    --glass-bg-strong: var(--smp-panel);
    --glass-border:    var(--smp-border);
    --glass-blur:      none;
    --glass-blur-lg:   none;
    --surface-inverse: var(--smp-blue-dark);
    --sidebar-text:   #ffffff;
    --sidebar-border: rgba(255, 255, 255, .2);
}

/* Respect OS preference on first load */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) { color-scheme: dark; }
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) { color-scheme: light; }
}

/* ========== Bootstrap 5 variable bridge ==========
   Point Bootstrap's own tokens at ours so its components/utilities
   follow the active theme without per-component overrides. ========== */
:root {
    --bs-body-bg:           var(--bg-body);
    --bs-body-color:        var(--text);
    --bs-secondary-color:   var(--text-muted);
    --bs-tertiary-color:    var(--text-disabled);
    --bs-emphasis-color:    var(--text);
    --bs-secondary-bg:      var(--bg-subtle);
    --bs-tertiary-bg:       var(--bg-surface);
    --bs-border-color:      var(--border);
    --bs-link-color:        var(--link);
    --bs-link-hover-color:  var(--link-hover);
    --bs-heading-color:     var(--text);
    --bs-body-font-family:  var(--ff-base);
    --bs-border-radius:     var(--radius-md);
    --bs-border-radius-sm:  var(--radius-sm);
    --bs-border-radius-lg:  var(--radius-lg);
    --bs-focus-ring-color:  var(--primary-weak);
}

/* Links and primary buttons follow the theme. Bootstrap 5.3 colors links via
   --bs-link-color-rgb and hardcodes .btn-primary, so set them here; this
   layer beats Bootstrap but loses to any app-layer rule. */
a {
    color: var(--link);
}
a:hover {
    color: var(--link-hover);
}
.btn-primary {
    --bs-btn-color:                var(--text-on-brand);
    --bs-btn-bg:                   var(--primary);
    --bs-btn-border-color:         var(--primary);
    --bs-btn-hover-color:          var(--text-on-brand);
    --bs-btn-hover-bg:             color-mix(in srgb, var(--primary) 85%, #000);
    --bs-btn-hover-border-color:   color-mix(in srgb, var(--primary) 80%, #000);
    --bs-btn-focus-shadow-rgb:     var(--primary-rgb, 13, 110, 253);
    --bs-btn-active-color:         var(--text-on-brand);
    --bs-btn-active-bg:            color-mix(in srgb, var(--primary) 80%, #000);
    --bs-btn-active-border-color:  color-mix(in srgb, var(--primary) 75%, #000);
    --bs-btn-disabled-color:       var(--text-on-brand);
    --bs-btn-disabled-bg:          var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
}
}