/*
==================================================
COLOR TOKENS
==================================================
CSS Custom Properties for the Concloud Dashboard
Centralized color and design token management.

🎨 QUICK REBRAND: Modify the 9 "BUSINESS COLORS"
values at the top — all other tokens cascade from
those values automatically.

Source: originally dashboard/static/css/base/variables.css
Moved to 01-tokens/ in Phase 0 of the CSS design-system
refactor. base/variables.css is now a @import shim.
==================================================
*/

:root {

    /* ===== BUSINESS COLORS - CHANGE THESE TO UPDATE YOUR BRAND ===== */
    /* 🎨 QUICK COLOR CHANGE: modify the 9 values below to rebrand the whole
       application. Every tint, alpha variant and gradient downstream is now
       derived from them with color-mix, so they genuinely cascade. The one
       exception is the --bs-*-rgb triplets, which Bootstrap requires as bare
       "r, g, b" numbers and must be updated by hand. */
    --business-primary: #060d47;
    /* 🔵 Midnight Hull — the brand ANCHOR. Near-black (luminance ~0.011), so it
       reads as black at full strength and as grey when diluted. It belongs on
       chrome, gradient deep-stops and hover states — NOT on interactive fills
       that need to read as "blue". That job is --primary-color, below. */
    --business-secondary: #10a0da;
    /* 🔵 Harbour Blue — the live accent/pointer: active nav, current-thing
       markers. 2.97:1 on white, so it may NOT carry text on a light surface;
       use it on the navy chrome (5.8:1) or as a non-text marker. */
    --business-accent: #00d4ff;
    /* 💠 Bright cyan for highlights and call-to-actions */
    --business-success: #10b981;
    /* 🟢 Emerald green for success states */
    --business-warning: #f59e0b;
    /* 🟡 Amber for warnings */
    --business-danger: #ef4444;
    /* 🔴 Red for errors and danger states */
    --business-info: #06b6d4;
    /* 🔷 Cyan for informational elements */
    --business-footer: #020f2a;
    /* 🌑 Footer background - darker shade of primary */
    --business-footer-dark: #010a1c;
    --theme-color: var(--business-primary);
    /* 🌑 Footer bottom bar - darkest shade of primary */

    /* ===== GENERATED COLOR VARIATIONS ===== */
    /* Primary Brand Colors - Auto-generated from business-primary (#060d47) */

    /* The INTERACTIVE brand voice: button fills, link text, focus rings, chart
       tooltips — everything a user acts on. Deliberately Deep Current rather
       than the Midnight Hull anchor: the hull is within 1% of black, so a hull
       button reads as a black button and the brand never actually appears.
       Deep Current is 7.6:1 both as text on white and as white text on itself,
       so it carries a label and reads unmistakably as blue.
       Dark mode lifts this to Shoal Blue (#2a8cf7) in themes/dark.css. */
    --primary-color: var(--primary-light);
    --primary-light: #0f4eb4;
    /* Deep Current — the interactive primary (see --primary-color) */
    --primary-lighter: #2a8cf7;
    /* Even lighter shade (sky blue, not purple) */
    --primary-lightest: #3cc9ff;
    /* Lightest shade for highlights */
    --primary-dark: #041240;
    /* Darker shade of primary */
    --primary-darker: #020f2a;
    /* Even darker shade */
    --primary-darkest: #010a1c;
    /* Darkest shade */

    /* Modern Color Palette - Based on Primary (#060d47) */
    --primary-50: #f0f2ff;
    /* Very light tint */
    --primary-100: #dce4ff;
    /* Light tint */
    --primary-200: #b8ccff;
    /* Lighter tint */
    --primary-300: #94b4ff;
    /* Light tint */
    --primary-400: #708cdd;
    /* Medium-light tint */
    --primary-500: var(--business-primary);
    /* Base color */
    --primary-600: #040a35;
    /* Darker shade */
    --primary-700: #030723;
    /* Dark shade */
    --primary-800: #020412;
    /* Darker shade */
    --primary-900: #010208;
    /* Darkest shade */

    --secondary-color: var(--business-secondary);
    --secondary-light: #33b4f0;
    /* Light shade of secondary */
    --secondary-dark: #0c7abf;
    /* Dark shade of secondary */
    --secondary-darker: #095a8f;
    /* Darker shade of secondary */
    --secondary-darkest: #073a5f;
    /* Darkest shade of secondary */


    /* Modern Accent Colors - Based on business colors */
    --accent-cyan: var(--business-accent);
    /* Business accent color */
    --accent-purple: #8b5cf6;
    --accent-purple-light: #a78bfa;
    /* Purple accent */
    --accent-pink: #ec4899;
    /* Pink accent */
    --accent-green: var(--business-success);
    /* Success green */
    --accent-orange: var(--business-warning);
    /* Warning orange */
    --accent-red: var(--business-danger);
    /* Error red */

    /* Baby Blue / Electric Blue Colors - Coupled with Primary */
    --baby-blue: #87ceeb;
    /* Baby blue */
    --baby-blue-light: #a8d8f0;
    /* Light baby blue */
    --baby-blue-lighter: #c9e6f7;
    /* Lighter baby blue */
    --electric-blue: #00bfff;
    /* Electric blue */
    --electric-blue-light: #33ccff;
    /* Light electric blue */
    --electric-blue-dark: #0099cc;
    /* Dark electric blue */
    --dark-blue: #1e3a8a;
    /* Dark blue */
    --dark-blue-light: #3b5ba0;
    /* Light dark blue */

    /* Modern Login Page Variables - Dark Theme */
    --login-bg-primary: linear-gradient(135deg, var(--business-primary) 0%, var(--business-secondary) 25%, #1a2968 50%, #040a35 80%, #020412 100%);
    --login-bg-secondary: linear-gradient(45deg, var(--business-secondary) 0%, var(--business-primary) 30%, #0c1658 70%, #040a35 100%);
    --login-bg-accent: linear-gradient(225deg, #060d47 0%, var(--business-secondary) 40%, #3a4d89 70%, #5a71aa 100%);
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.15);
    --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.15);

    /* Additional accent color tokens */
    --accent-blue: #3b82f6;
    /* Modern blue accent */
    --accent-indigo: #6366f1;
    /* Modern indigo accent */
    --accent-violet: #7c3aed;
    /* Modern violet accent */

    /* Modern Neutral Colors */
    --neutral-50: #fafafa;
    /* Lightest neutral */
    --neutral-100: #f5f5f5;
    /* Light neutral */
    --neutral-200: #e5e5e5;
    /* Light gray */
    --neutral-300: #d4d4d4;
    /* Medium-light gray */
    --neutral-400: #a3a3a3;
    /* Medium gray */
    --neutral-500: #737373;
    /* Base gray */
    --neutral-600: #525252;
    /* Dark gray */
    --neutral-700: #404040;
    /* Darker gray */
    --neutral-800: #262626;
    /* Dark gray */
    --neutral-900: #171717;
    /* Darkest gray */

    --bg-black: #000000;

    /* Modern Status Colors - Auto-generated from business colors */
    --success-color: var(--business-success);
    --success-light: #34d399;
    /* Light emerald */
    --success-lighter: #6ee7b7;
    /* Lighter emerald */
    --success-dark: #059669;
    /* Dark emerald */
    --success-darker: #047857;
    /* Darker emerald */
    --success-alt: var(--success-color);

    --warning-color: var(--business-warning);
    --warning-light: #fbbf24;
    /* Light amber */
    --warning-lighter: #fcd34d;
    /* Lighter amber */
    --warning-dark: #d97706;
    /* Dark amber */
    --warning-darker: #b45309;
    /* Darker amber */
    --warning-alt: var(--warning-dark);

    --danger-color: var(--business-danger);
    --danger-light: #f87171;
    /* Light red */
    --danger-lighter: #fca5a5;
    /* Lighter red */
    --danger-dark: #dc2626;
    /* Dark red */
    --danger-darker: #b91c1c;
    /* Darker red */
    --danger-alt: var(--danger-dark);

    --info-color: var(--business-info);
    --info-light: #22d3ee;
    /* Light cyan */
    --info-lighter: #67e8f9;
    /* Lighter cyan */
    --info-dark: #0891b2;
    /* Dark cyan */
    --info-darker: #0e7490;
    /* Darker cyan */
    --info-alt: #3b82f6;
    /* Modern blue alternative */
    --info-alt-dark: #2563eb;
    /* Dark blue */
    --info-alt-darker: #1d4ed8;
    /* Darker blue */

    /* Bootstrap Colors - Modern Palette */
    /* Bootstrap Variables - Automatically use business colors */
    --bs-primary: var(--business-primary);
    --bs-primary-dark: var(--primary-dark);
    --bs-secondary: var(--business-secondary);
    --bs-success: var(--business-success);
    --bs-info: var(--business-info);
    --bs-warning: var(--business-warning);
    --bs-danger: var(--business-danger);
    --bs-light: #f9fafb;
    /* Modern light gray */
    --bs-dark: #1f2937;
    /* Modern dark gray */
    --bs-white: #ffffff;
    --bs-black: #000000;

    /* Custom Colors from style.default.premium.css */
    --bs-red: #ff7676;
    --bs-yellow: #eef157;
    --bs-orange: #ffc36d;
    --bs-faintGreen: #54e69d;
    --bs-violet: #796AEE;
    --bs-paleBlue: #85b4f2;
    --bs-darkBlue: #2f333e;
    --bs-sidebar-bg: #30323e;

    /* RGB Variants for Bootstrap Colors.
       These are raw "r, g, b" triplets (Bootstrap wraps them in rgba()), so
       they cannot be derived with color-mix and must be kept in step with the
       hex values above by hand. They had drifted to the stock Bootstrap 5
       palette: secondary was #6c757d grey while --bs-secondary is Harbour
       Blue, success #28a745 vs #10b981, info #17a2b8 vs #06b6d4, warning
       #ffc107 vs #f59e0b, danger #dc3545 vs #ef4444. */
    --bs-primary-rgb: 6, 13, 71;
    --bs-secondary-rgb: 16, 160, 218;
    --bs-success-rgb: 16, 185, 129;
    --bs-info-rgb: 6, 182, 212;
    --bs-warning-rgb: 245, 158, 11;
    --bs-danger-rgb: 239, 68, 68;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 52, 58, 64;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-red-rgb: 255, 118, 118;
    --bs-yellow-rgb: 238, 241, 87;
    --bs-orange-rgb: 255, 195, 109;
    --bs-faintGreen-rgb: 84, 230, 157;
    --bs-violet-rgb: 121, 106, 238;
    --bs-paleBlue-rgb: 133, 180, 242;
    --bs-darkBlue-rgb: 47, 51, 62;
    --bs-sidebar-bg-rgb: 48, 50, 62;

    /* Secondary Colors */
    --secondary-red: #a52d28;
    --secondary-red-dark: #9c2722;
    --secondary-red-darker: #b02a37;

    /* Orange/Error Colors */
    --orange-color: #fd7e14;
    --orange-dark: #e55a00;

    /* Modern Gradient Colors (Primary: business-primary, accents electric blue) */
    --gradient-primary: linear-gradient(120deg, var(--primary-dark) 0%, var(--primary-color) 50%, var(--primary-light) 80%, var(--primary-lightest) 100%);
    --gradient-primary-light: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-lighter) 50%, var(--primary-lightest) 100%);
    --gradient-primary-lighter: linear-gradient(135deg, var(--primary-lighter) 0%, var(--primary-lightest) 50%, #5da3ff 100%);
    --gradient-primary-dark: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 50%, var(--primary-light) 100%);
    --gradient-success: linear-gradient(135deg, #059669 0%, #10b981 30%, #34d399 70%, #6ee7b7 100%);
    --gradient-warning: linear-gradient(135deg, #d97706 0%, #f59e0b 30%, #fbbf24 70%, #fcd34d 100%);
    --gradient-danger: linear-gradient(135deg, #dc2626 0%, #ef4444 30%, #f87171 70%, #fca5a5 100%);
    --gradient-info: linear-gradient(135deg, var(--info-dark) 0%, #00caf5 30%, #22d3ee 70%, #67e8f9 100%);

    /* ===== TYPE COLORS =====
       One canonical accent per entity type — the single source of truth that
       drives BOTH that type's icon tile (.c-icon-tile--<type>, everywhere the
       entity's icon appears) AND its c-hero brand wash, which mixes this value
       with --primary-color directly. Pastel tints and dark-mode-brightened
       glyphs derive from these via color-mix, so each type needs one value.
       NOTE: the --hero-bg-* block below is legacy and no longer drives c-hero;
       only --hero-bg-default is still consumed (by 05-pages/user-form.css). */
    --type-device:      #2563eb; /* blue */
    --type-customer:    #6366f1; /* indigo */
    --type-product:     #0d9488; /* teal */
    --type-revision:    #0284c7; /* azure */
    --type-rollout:     #16a34a; /* green */
    --type-errors:      #dc2626; /* red */
    --type-location:    #ea580c; /* orange */
    --type-module:      #7c3aed; /* violet */
    --type-user:        #db2777; /* magenta */
    --type-measurement: #06b6d4; /* cyan */

    /* Hero gradients — dark surface tints for entity detail hero headers.
       Each entity hero = the deep navy brand anchor (--business-primary)
       blooming 135° into that entity's TYPE COLOR, so the hero and the entity's
       icon share one accent. Default/dashboard keep the generic brand indigo. */
    --hero-bg-default: linear-gradient(135deg, var(--business-primary) 0%, #1a237e 100%);
    --hero-bg-device: linear-gradient(135deg, var(--business-primary) 0%, var(--type-device) 100%);
    --hero-bg-dashboard: linear-gradient(135deg, var(--business-primary) 0%, #0d1a5c 50%, var(--type-device) 100%);
    --hero-bg-customer: linear-gradient(135deg, var(--business-primary) 0%, var(--type-customer) 100%);
    --hero-bg-product: linear-gradient(135deg, var(--business-primary) 0%, var(--type-product) 100%);
    --hero-bg-revision: linear-gradient(135deg, var(--business-primary) 0%, var(--type-revision) 100%);
    --hero-bg-rollout: linear-gradient(135deg, var(--business-primary) 0%, var(--type-rollout) 100%);
    --hero-bg-errors: linear-gradient(135deg, var(--business-primary) 0%, var(--type-errors) 100%);

    /* ===== CHROME =====
       The navbar and sidebar are one frame and share every value here, so the
       two can never drift apart. The frame is LIGHT in this theme and dark in
       themes/dark.css, which means anything painted on it must read its ink
       from these roles rather than from a fixed --on-dark-* value — that is
       what makes the same component legible in both themes.

       History worth keeping: a Midnight Hull frame put the brand on every
       page but sat at 14.3:1 against the canvas, which read as a hard cut,
       and softening it toward a neutral landed on a colour that belonged to
       neither the brand nor the palette. Light chrome is the deliberate
       resolution; the brand now lives in --chrome-accent and the mark. */
    --chrome-bg: var(--surface-raised);
    --chrome-ink: var(--ink-strong);
    --chrome-ink-muted: var(--neutral-500);
    --chrome-ink-subtle: var(--neutral-400);
    --chrome-surface: var(--surface-sunken);
    --chrome-surface-hover: var(--neutral-100);
    --chrome-surface-active: var(--primary-50);
    --chrome-border: var(--border-default);

    /* Deep Current, not Harbour Blue: 7.6:1 on a white frame where Harbour
       Blue manages only 2.97:1 and cannot legally carry a label. */
    --chrome-accent: var(--primary-color);

    /* The mark is dark artwork; it inverts to white on the dark frame. */
    --chrome-logo-filter: brightness(0);

    /* ===== SIDEBAR (light theme) =====
       The chrome is the brand. Sidebar and navbar both sit on Midnight Hull so
       the app is framed in brand navy around a light working canvas — the same
       gesture dark mode already makes with Hull Chrome, which is why dark mode
       read as branded and light mode did not. Because the rail is now a dark
       surface, its ink comes from the fixed --on-dark-* roles rather than the
       theme's neutrals. Harbour Blue marks the active item at 5.8:1 on navy. */
    --sidebar-bg: var(--chrome-bg);
    --sidebar-text: var(--chrome-ink-muted);
    --sidebar-text-hover: var(--chrome-ink);
    --sidebar-text-active: var(--chrome-accent);
    --sidebar-icon: var(--chrome-ink-subtle);
    --sidebar-icon-hover: var(--chrome-ink);
    --sidebar-icon-active: var(--chrome-accent);
    --sidebar-item-hover-bg: var(--chrome-surface);
    --sidebar-item-active-bg: var(--chrome-surface-active);
    --sidebar-active-accent: var(--chrome-accent);
    --sidebar-divider: var(--chrome-border);
    --sidebar-section-text: var(--chrome-ink-subtle);

    /* ===== NAVBAR (top chrome, light theme) =====
       Solid Midnight Hull, matching the sidebar so the two read as one
       continuous brand frame. Deliberately NOT frosted: a translucent bar
       lets page content scroll through the navy and makes the chrome read as
       an overlay instead of as structure. --navbar-bg-solid is kept as a
       separate name because the notification badge's punch-through ring
       consumes it, but it now resolves to the same paint as --navbar-bg.
       Dark overrides live in themes/dark.css. */
    --navbar-bg: var(--chrome-bg);
    --navbar-bg-solid: var(--chrome-bg);
    --navbar-border: var(--chrome-border);
    --navbar-icon: var(--chrome-ink-muted);
    --navbar-icon-hover: var(--chrome-accent);
    --navbar-item-hover-bg: var(--chrome-surface);
    /* Cooler and a step deeper than --chrome-surface. The command bar is the
       one control that must read as an input at a glance, and a #f8f9fa pill
       on a white frame has no edge at all. */
    --navbar-search-bg: color-mix(in srgb, var(--business-primary) 5%, var(--surface-sunken));
    --navbar-scroll-shadow: 0 8px 24px -12px color-mix(in srgb, var(--business-primary) 16%, transparent);

    /* Modern Background Gradients */
    --bg-gradient-light: linear-gradient(135deg, #eef6ff 0%, #dbeafe 100%);
    --bg-gradient-mid: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    --bg-gradient-end: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%);

    /* Modern Shadow Colors */
    /* Tinted from the brand anchor. These previously hardcoded rgba(20,15,84),
       i.e. #140f54 — a colour that exists nowhere else in the system. */
    --shadow-primary: 0 4px 14px 0 color-mix(in srgb, var(--business-primary) 15%, transparent);
    --shadow-primary-lg: 0 10px 25px 0 color-mix(in srgb, var(--business-primary) 20%, transparent);
    --shadow-success: 0 4px 14px 0 rgba(16, 185, 129, 0.15);
    --shadow-warning: 0 4px 14px 0 rgba(245, 158, 11, 0.15);
    --shadow-danger: 0 4px 14px 0 rgba(239, 68, 68, 0.15);
    --shadow-info: 0 4px 14px 0 rgba(6, 182, 212, 0.15);

    /* Surface shadows (for c-card, c-icon-tile, etc.) */
    --shadow-xs: 0 1px 2px var(--black-rgba-05), 0 2px 8px var(--black-rgba-06);
    --shadow-card: 0 1px 2px var(--black-rgba-05), 0 4px 16px var(--black-rgba-06);
    --shadow-card-hover: 0 4px 8px var(--black-rgba-06), 0 12px 32px var(--black-rgba-10);
    --shadow-icon-tile-solid: 0 2px 8px -2px var(--black-rgba-15);
    /* Resting depth for a surface that already carries a 1px border. A border
       plus a 16px-blur lift reads doubly heavy; the border defines the edge and
       this only separates the surface from the page behind it. */
    --shadow-card-flat: 0 1px 2px var(--black-rgba-05);

    /* ===== ALPHA VARIANTS =====
       Every value below is DERIVED from its source token with color-mix, so the
       "change the business colors to rebrand" promise at the top of this file is
       actually true. They previously hardcoded literal rgb() triplets left over
       from the purchased Bootstrap theme, which had drifted badly: the danger
       set encoded #dc3545 while --danger-color is #ef4444, warning encoded
       #ffc107 vs #f59e0b, success #198754 vs #10b981, info #0dcaf0 vs #06b6d4,
       and the "Primary Light" set encoded #1a2968 while --primary-light is
       #0f4eb4. A rebrand moved the solid colors and left every tint behind.

       Prefer color-mix() directly in new component CSS; these aliases exist for
       the code that already consumes them. */
    --primary-alpha-light: color-mix(in srgb, var(--primary-color) 14%, transparent);
    --secondary-alpha-light: color-mix(in srgb, var(--ink-muted) 14%, transparent);

    --primary-rgba-05: color-mix(in srgb, var(--primary-color) 5%, transparent);
    --primary-rgba-10: color-mix(in srgb, var(--primary-color) 10%, transparent);
    --primary-rgba-15: color-mix(in srgb, var(--primary-color) 15%, transparent);
    --primary-rgba-20: color-mix(in srgb, var(--primary-color) 20%, transparent);
    --primary-rgba-25: color-mix(in srgb, var(--primary-color) 25%, transparent);
    --primary-rgba-30: color-mix(in srgb, var(--primary-color) 30%, transparent);
    --primary-rgba-40: color-mix(in srgb, var(--primary-color) 40%, transparent);
    --primary-rgba-50: color-mix(in srgb, var(--primary-color) 50%, transparent);

    --secondary-rgba-05: color-mix(in srgb, var(--secondary-color) 5%, transparent);
    --secondary-rgba-10: color-mix(in srgb, var(--secondary-color) 10%, transparent);
    --secondary-rgba-15: color-mix(in srgb, var(--secondary-color) 15%, transparent);
    --secondary-rgba-20: color-mix(in srgb, var(--secondary-color) 20%, transparent);
    --secondary-rgba-25: color-mix(in srgb, var(--secondary-color) 25%, transparent);
    --secondary-rgba-30: color-mix(in srgb, var(--secondary-color) 30%, transparent);
    --secondary-rgba-40: color-mix(in srgb, var(--secondary-color) 40%, transparent);
    --secondary-rgba-50: color-mix(in srgb, var(--secondary-color) 50%, transparent);

    --primary-dark-rgba-05: color-mix(in srgb, var(--primary-dark) 5%, transparent);

    --primary-light-rgba-05: color-mix(in srgb, var(--primary-light) 5%, transparent);
    --primary-light-rgba-10: color-mix(in srgb, var(--primary-light) 10%, transparent);
    --primary-light-rgba-15: color-mix(in srgb, var(--primary-light) 15%, transparent);
    --primary-light-rgba-20: color-mix(in srgb, var(--primary-light) 20%, transparent);
    --primary-light-rgba-30: color-mix(in srgb, var(--primary-light) 30%, transparent);

    --danger-rgba-02: color-mix(in srgb, var(--danger-color) 2%, transparent);
    --danger-rgba-03: color-mix(in srgb, var(--danger-color) 3%, transparent);
    --danger-rgba-05: color-mix(in srgb, var(--danger-color) 5%, transparent);
    --danger-rgba-08: color-mix(in srgb, var(--danger-color) 8%, transparent);
    --danger-rgba-10: color-mix(in srgb, var(--danger-color) 10%, transparent);
    --danger-rgba-15: color-mix(in srgb, var(--danger-color) 15%, transparent);
    --danger-rgba-20: color-mix(in srgb, var(--danger-color) 20%, transparent);
    --danger-rgba-30: color-mix(in srgb, var(--danger-color) 30%, transparent);
    --danger-dark-rgba-30: color-mix(in srgb, var(--danger-dark) 30%, transparent);
    --danger-darker-rgba-30: color-mix(in srgb, var(--danger-darker) 30%, transparent);
    --danger-light-rgba-30: color-mix(in srgb, var(--danger-light) 30%, transparent);

    --warning-rgba-02: color-mix(in srgb, var(--warning-color) 2%, transparent);
    --warning-rgba-03: color-mix(in srgb, var(--warning-color) 3%, transparent);
    --warning-rgba-05: color-mix(in srgb, var(--warning-color) 5%, transparent);
    --warning-rgba-08: color-mix(in srgb, var(--warning-color) 8%, transparent);
    --warning-rgba-10: color-mix(in srgb, var(--warning-color) 10%, transparent);
    --warning-rgba-15: color-mix(in srgb, var(--warning-color) 15%, transparent);
    --warning-rgba-20: color-mix(in srgb, var(--warning-color) 20%, transparent);
    --warning-rgba-30: color-mix(in srgb, var(--warning-color) 30%, transparent);

    --success-rgba-10: color-mix(in srgb, var(--success-color) 10%, transparent);
    --success-rgba-20: color-mix(in srgb, var(--success-color) 20%, transparent);
    --success-rgba-30: color-mix(in srgb, var(--success-color) 30%, transparent);
    --success-light-rgba-30: color-mix(in srgb, var(--success-light) 30%, transparent);
    --success-lighter-rgba-30: color-mix(in srgb, var(--success-lighter) 30%, transparent);

    --info-rgba-10: color-mix(in srgb, var(--info-color) 10%, transparent);
    --info-rgba-20: color-mix(in srgb, var(--info-color) 20%, transparent);
    --info-rgba-30: color-mix(in srgb, var(--info-color) 30%, transparent);
    --info-alt-rgba-10: color-mix(in srgb, var(--info-alt) 10%, transparent);
    --info-alt-rgba-30: color-mix(in srgb, var(--info-alt) 30%, transparent);

    /* Common RGBA Colors */
    --black-rgba-05: rgba(0, 0, 0, 0.05);
    --black-rgba-06: rgba(0, 0, 0, 0.06);
    --black-rgba-08: rgba(0, 0, 0, 0.08);
    --black-rgba-10: rgba(0, 0, 0, 0.1);
    --black-rgba-12: rgba(0, 0, 0, 0.12);
    --black-rgba-15: rgba(0, 0, 0, 0.15);
    --black-rgba-18: rgba(0, 0, 0, 0.18);
    --black-rgba-20: rgba(0, 0, 0, 0.2);

    --white-rgba-10: rgba(255, 255, 255, 0.1);
    --white-rgba-30: rgba(255, 255, 255, 0.3);
    --white-rgba-50: rgba(255, 255, 255, 0.5);
    --white-rgba-70: rgba(255, 255, 255, 0.7);
    --white-rgba-90: rgba(255, 255, 255, 0.9);

    /* ===== INDEX PAGE COCKPIT TOKENS ===== */
    --index-surface: #ffffff;
    --index-surface-glass: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.9));
    --index-surface-border: #e8edf4;
    --index-surface-shadow: 0 1px 2px rgba(20,30,50,0.04);

    --index-text-primary: #1a2436;
    --index-text-muted: #7184a3;
    --index-label: #7184a3;

    --index-ring-track: #e5ebf3;
    --index-progress-track: #e5ebf3;

    --index-success: #16a34a;
    --index-success-bg: #e6f6ec;
    --index-success-gradient-start: #16a34a;
    --index-success-gradient-end: #22c55e;

    --index-warning: #f59e0b;
    --index-warning-bg: #fef3c7;

    --index-danger: #dc2626;
    --index-danger-bg: #fde7ea;

    --index-stale: #ca8a04;
    --index-stale-bg: #fef9c3;

    --index-delta-up: #16a34a;
    --index-delta-down: #dc2626;

    --index-accent: var(--business-primary);

    --index-hero-bg:
        radial-gradient(circle at 85% -20%, var(--secondary-rgba-25) 0%, transparent 55%),
        linear-gradient(135deg, #0b1a56 0%, #14296e 55%, #1d3a8a 100%);
    --index-toggle-bg: #eef2f8;
    --index-toggle-border: #dfe6ef;
    --index-toggle-active-bg: #ffffff;
    --index-toggle-active-shadow: 0 1px 2px rgba(20,30,50,0.08);

    /* ==================================================
       CANONICAL ROLE TOKENS
       ==================================================
       Prefer these names in component CSS. Dark-mode
       overrides live in themes/dark.css.
       ================================================== */

    /* Surfaces */
    --surface-bg: #ffffff;
    --surface-raised: #ffffff;
    --surface-sunken: #f8f9fa;
    --surface-inverse: var(--neutral-900);

    /* Page background gradient stops (consumed by 02-base/page-shell.css).
       The canvas sits a step below white so raised surfaces (cards,
       page-header--surface) read as elevated against it. Knob: lighten
       --page-bg-mid toward #fff for a flatter canvas, darken for more lift. */
    --page-bg-edge: #e4ecfa;
    --page-bg-mid: #dce5f4;

    /* Ink (text) */
    --ink-strong: #1a1a1a;
    --ink-default: #495057;
    --ink-muted: #6c757d;
    --ink-inverse: #ffffff;

    /* Borders */
    --border-default: #e9ecef;
    --border-strong: #dee2e6;
    --border-muted: var(--neutral-100);
    --border-subtle: #eef1f5;

    /* Interactive surfaces and controls */
    --surface-overlay: rgba(255, 255, 255, 0.98);
    --surface-hover: var(--neutral-50);
    --surface-hover-strong: var(--neutral-100);
    --surface-selected: var(--primary-rgba-10);
    --control-bg: var(--surface-raised);
    --control-bg-disabled: var(--neutral-100);
    --control-placeholder: var(--neutral-400);
    --border-input: var(--neutral-300);
    --focus-ring: var(--primary-rgba-15);
    --backdrop-bg: rgba(2, 15, 42, 0.52);

    /* Elevation */
    --shadow-sm: 0 1px 3px var(--black-rgba-06);
    --shadow-md: 0 4px 12px var(--black-rgba-10);
    --shadow-lg: 0 8px 32px var(--black-rgba-12);

    /* Semantic status roles */
    --status-success-fg: var(--success-dark);
    --status-success-bg: color-mix(in srgb, var(--success-color) 12%, var(--surface-raised));
    --status-success-border: color-mix(in srgb, var(--success-color) 28%, transparent);
    --status-warning-fg: var(--warning-dark);
    --status-warning-bg: color-mix(in srgb, var(--warning-color) 14%, var(--surface-raised));
    --status-warning-border: color-mix(in srgb, var(--warning-color) 30%, transparent);
    --caution-color: #eab308;
    --caution-dark: #ca8a04;
    --caution-light: #fde047;
    --status-caution-fg: var(--caution-dark);
    --status-caution-bg: color-mix(in srgb, var(--caution-color) 14%, var(--surface-raised));
    --status-caution-border: color-mix(in srgb, var(--caution-color) 30%, transparent);
    --status-error-fg: var(--orange-dark);
    --status-error-bg: color-mix(in srgb, var(--orange-color) 14%, var(--surface-raised));
    --status-error-border: color-mix(in srgb, var(--orange-color) 30%, transparent);
    --status-danger-fg: var(--danger-dark);
    --status-danger-bg: color-mix(in srgb, var(--danger-color) 12%, var(--surface-raised));
    --status-danger-border: color-mix(in srgb, var(--danger-color) 28%, transparent);
    --status-info-fg: var(--info-dark);
    --status-info-bg: color-mix(in srgb, var(--info-color) 12%, var(--surface-raised));
    --status-info-border: color-mix(in srgb, var(--info-color) 28%, transparent);
    --status-neutral-fg: var(--ink-default);
    --status-neutral-bg: var(--neutral-100);
    --status-neutral-border: var(--neutral-300);

    /* Fixed contrast roles for controls placed on always-dark brand/hero
       surfaces. These intentionally do not invert with the selected theme. */
    --on-dark-ink-strong: rgba(255, 255, 255, 0.95);
    --on-dark-ink-default: rgba(255, 255, 255, 0.85);
    --on-dark-ink-muted: rgba(255, 255, 255, 0.6);
    --on-dark-ink-subtle: rgba(255, 255, 255, 0.4);
    --on-dark-surface: rgba(255, 255, 255, 0.1);
    --on-dark-surface-hover: rgba(255, 255, 255, 0.15);
    --on-dark-surface-active: rgba(255, 255, 255, 0.2);
    --on-dark-border: rgba(255, 255, 255, 0.18);
    --on-dark-border-strong: rgba(255, 255, 255, 0.3);

    /* Fixed light popover roles for controls which deliberately stay light
       while sitting on an always-dark page header. */
    --fixed-light-surface: #ffffff;
    --fixed-light-surface-muted: #f9fafb;
    --fixed-light-surface-hover: #f3f4f6;
    --fixed-light-ink-strong: #111827;
    --fixed-light-ink-default: #374151;
    --fixed-light-ink-muted: #6b7280;
    --fixed-light-ink-subtle: #9ca3af;
    --fixed-light-border: #e5e7eb;
    --fixed-dark-surface: #334155;
    --fixed-dark-surface-strong: #475569;

    /* Notification type roles (formerly 05-pages/notification-tokens.css) */
    --notif-offline: var(--danger-color);
    --notif-online: var(--success-color);
    --notif-error: var(--warning-color);
    --notif-critical: var(--danger-color);
    --notif-threshold: var(--business-warning);
    --notif-registered: var(--primary-light);
    --notif-update: var(--info-color);
    --notif-default: var(--neutral-500);
    --gradient-offline: var(--gradient-danger);
    --gradient-online: var(--gradient-success);
    --gradient-error: var(--gradient-warning);
    --gradient-critical: var(--gradient-danger);
    --gradient-threshold: linear-gradient(135deg, var(--warning-color) 0%, var(--warning-dark) 100%);
    --gradient-registered: var(--gradient-primary-dark);
    --gradient-update: var(--gradient-info);

    /* Device lifecycle badge roles */
    --lifecycle-development-bg: #e7f1ff;
    --lifecycle-development-fg: #053069;
    --lifecycle-development-border: #b8d4f8;
    --lifecycle-retired-bg: #fff6e0;
    --lifecycle-retired-fg: #5a4007;
    --lifecycle-retired-border: #f3d796;
    --lifecycle-archived-bg: #ebedef;
    --lifecycle-archived-fg: #212529;
    --lifecycle-archived-border: #ced4da;
    --lifecycle-pending-bg: #d8f3f6;
    --lifecycle-pending-fg: #0c4a4e;
    --lifecycle-pending-border: #93d6dc;

    /* Canvas/chart roles. JavaScript reads these through getComputedStyle so
       charts use the same palette as CSS in both themes. */
    --chart-primary: var(--primary-color);
    --chart-success: var(--success-color);
    --chart-danger: var(--danger-color);
    --chart-warning: var(--warning-color);
    --chart-info: var(--info-alt);
    --chart-secondary: var(--ink-muted);
    --chart-text: var(--ink-default);
    --chart-text-muted: var(--ink-muted);
    --chart-grid: color-mix(in srgb, var(--ink-strong) 8%, transparent);
    --chart-background: var(--surface-raised);
    --chart-area-fill: color-mix(in srgb, var(--chart-primary) 15%, transparent);
    --chart-band-fill: color-mix(in srgb, var(--chart-primary) 8%, transparent);
    /* Threshold overlay. The zone is the region a limit forbids and covers a large
       area, so it stays faint; a breach is a bounded fact and reads stronger. */
    --chart-info-zone: color-mix(in srgb, var(--chart-info) 7%, transparent);
    --chart-info-band: color-mix(in srgb, var(--chart-info) 18%, transparent);
    --chart-warning-zone: color-mix(in srgb, var(--chart-warning) 7%, transparent);
    --chart-warning-band: color-mix(in srgb, var(--chart-warning) 18%, transparent);
    --chart-danger-zone: color-mix(in srgb, var(--chart-danger) 7%, transparent);
    --chart-danger-band: color-mix(in srgb, var(--chart-danger) 18%, transparent);
    /* Offline is absent data, not bad data, so it reads as a neutral hatched void —
       texture rather than hue is what keeps it distinct from a breach band. */
    --chart-offline-band: color-mix(in srgb, var(--chart-secondary) 10%, transparent);
    --chart-offline-hatch: color-mix(in srgb, var(--chart-secondary) 38%, transparent);
    --chart-zoom-bg: color-mix(in srgb, var(--ink-strong) 3%, transparent);
    /* Tooltip. A hover readout is a popover, so it takes the raised-surface
       material the rest of the deck's popovers use rather than a brand fill:
       on a neutral ground the series colours, threshold hues and a real danger
       red all keep their meaning, which a saturated blue slab cannot allow.
       Every role below delegates to a theme token, so dark mode follows. */
    --chart-tooltip-bg: var(--surface-overlay);
    --chart-tooltip-text: var(--ink-strong);
    --chart-tooltip-border: var(--border-default);
    --chart-tooltip-muted: var(--ink-muted);
    --chart-palette-1: #3b82f6;
    --chart-palette-2: #e69f00;
    --chart-palette-3: #009e73;
    --chart-palette-4: #ef4444;
    --chart-palette-5: #56b4e9;
    --chart-palette-6: #7f3c8d;
    --chart-palette-7: #d55e00;
    --chart-palette-8: #cc79a7;
    --chart-palette-9: #8b5cf6;
    --chart-palette-10: #14b8a6;
    --chart-palette-11: #f97316;
    --chart-palette-12: #06b6d4;
}