/* ================================================== 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 */ /* ===== BRAND RAMP — derived from --business-primary ===== Every shade of the primary is Midnight Hull re-lit: a lightness and chroma of its own, and the hull's hue turned by a fixed step (the derivation is in the @supports block at the end of this file). Change --business-primary and the ramp follows in both themes; each theme only picks its steps (--primary-* below, and themes/dark.css). The hex values are what the ramp resolves to for #060d47, and stand in for browsers without relative colour syntax. */ --brand-abyss: #041240; --brand-abyss-deep: #020f2a; --brand-abyss-deepest: #010a1c; --brand-abyss-floor: #010611; --brand-deep-current: #0f4eb4; --brand-shoal: #2a8cf7; --brand-sky: #3cc9ff; --brand-sky-light: #5ed8ff; --brand-sky-lighter: #7ee4ff; /* ===== PRIMARY SCALE (light theme) ===== */ /* The primary IS the business primary: button fills, link text, focus rings — everything a user acts on — are Midnight Hull. The scale steps away from it in lightness: every -light step is lighter than the primary, every -dark step darker (oklch lightness 0.208 for the hull, 0.176 / 0.146 / 0.120 below it). Dark mode lifts the primary to Shoal Blue in themes/dark.css, where the hull would vanish into the page. */ --primary-color: var(--business-primary); --primary-light: var(--brand-deep-current); --primary-lighter: var(--brand-shoal); --primary-lightest: var(--brand-sky); --primary-dark: var(--brand-abyss-deep); --primary-darker: var(--brand-abyss-deepest); --primary-darkest: var(--brand-abyss-floor); /* Hover fill for primary surfaces. The hull is too close to black for a darker step to read, so light mode lifts a third of the way to Deep Current instead (white label still well above AA). Dark mode sinks. */ --primary-hover: color-mix(in oklch, var(--primary-color) 65%, var(--primary-light)); /* 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: #3cf; /* Light electric blue */ --electric-blue-dark: #09c; /* 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: rgb(255 255 255 / 8%); --glass-border: rgb(255 255 255 / 15%); --shadow-glass: 0 8px 32px rgb(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: #000; /* 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: #fff; --bs-black: #000; /* 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--, 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-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 "you are here" chip: a solid brand fill — the same paint as --bs-primary — with inverse ink, the one saturated object on an otherwise light frame. White on Midnight Hull is 18:1. A small real-offset shadow seats it on the rail. */ --chrome-surface-active: var(--business-primary); --chrome-on-active: var(--ink-inverse); --chrome-active-edge: 0 1px 2px color-mix(in srgb, var(--business-primary) 30%, transparent), 0 2px 6px -2px color-mix(in srgb, var(--business-primary) 35%, transparent); /* 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-on-active); --sidebar-item-hover-bg: var(--chrome-surface); --sidebar-item-active-bg: var(--chrome-surface-active); --sidebar-item-active-edge: var(--chrome-active-edge); --sidebar-item-active-ink: var(--chrome-on-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 rgb(16 185 129 / 15%); --shadow-warning: 0 4px 14px 0 rgb(245 158 11 / 15%); --shadow-danger: 0 4px 14px 0 rgb(239 68 68 / 15%); --shadow-info: 0 4px 14px 0 rgb(6 182 212 / 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: rgb(0 0 0 / 5%); --black-rgba-06: rgb(0 0 0 / 6%); --black-rgba-08: rgb(0 0 0 / 8%); --black-rgba-10: rgb(0 0 0 / 10%); --black-rgba-12: rgb(0 0 0 / 12%); --black-rgba-15: rgb(0 0 0 / 15%); --black-rgba-18: rgb(0 0 0 / 18%); --black-rgba-20: rgb(0 0 0 / 20%); --white-rgba-10: rgb(255 255 255 / 10%); --white-rgba-30: rgb(255 255 255 / 30%); --white-rgba-50: rgb(255 255 255 / 50%); --white-rgba-70: rgb(255 255 255 / 70%); --white-rgba-90: rgb(255 255 255 / 90%); /* ===== INDEX PAGE COCKPIT TOKENS ===== */ --index-surface: #fff; --index-surface-glass: linear-gradient(180deg, rgb(255 255 255 / 95%), rgb(255 255 255 / 90%)); --index-surface-border: #e8edf4; --index-surface-shadow: 0 1px 2px rgb(20 30 50 / 4%); --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: #fff; --index-toggle-active-shadow: 0 1px 2px rgb(20 30 50 / 8%); /* ================================================== CANONICAL ROLE TOKENS ================================================== Prefer these names in component CSS. Dark-mode overrides live in themes/dark.css. ================================================== */ /* Surfaces */ --surface-bg: #fff; --surface-raised: #fff; --surface-sunken: #f8f9fa; --surface-inverse: var(--neutral-900); /* Page background (consumed by 02-base/page-shell.css): a spotlight on the top edge whose core is the business primary — mixed into Deep Current in oklch, because the hull diluted on its own reads as grey — easing out through Deep Current and Shoal Blue into a blue-grey canvas, under a wide soft Sky halo. The canvas sits well below white so raised surfaces (cards, page-header--surface) still read as elevated. Knobs: the core's mix = how navy the centre is; darker --page-bg-base = more contrast. The fade's shape lives in page-shell.css. */ --page-bg-base: #d8e1f0; --page-spot-core: color-mix(in oklch, var(--business-primary) 55%, var(--primary-light)); --page-spot-mid: var(--primary-light); --page-spot-edge: var(--primary-lighter); --page-bg-glow: color-mix(in srgb, var(--primary-lightest) 30%, transparent); /* Ink (text) */ --ink-strong: #1a1a1a; --ink-default: #495057; --ink-muted: #6c757d; --ink-inverse: #fff; /* Borders — the lines that divide content (rows, card headers/footers, sections) and outline controls. Laddered subtle < muted < default < strong; contrast against --surface-raised: 1.19 / 1.23 / 1.34 / 1.54. */ --border-default: #d9dfe7; --border-strong: #c9d1dc; --border-muted: #e3e8ef; --border-subtle: #e8ecf2; /* Outline of a resting surface (card, widget, table shell, filter bar). Surfaces are separated from the canvas by fill and shadow, not a drawn rim, so this stays transparent in both themes. The 1px border it colours is kept so focus/state modifiers can still set border-color without shifting layout. */ --surface-edge: transparent; /* Interactive surfaces and controls */ /* Ground of a detached overlay (menu, popover, select panel, toast, chart tooltip). Opaque: whatever it floats over must not show through. */ --surface-overlay: var(--surface-raised); --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); /* Segmented controls (c-tabs__nav--segmented): a track that reads against the card beneath it, and the filled pill that marks the active segment. The pill is the primary colour, so a customer theme recolours it. */ --control-track-bg: color-mix(in oklch, var(--primary-color) 6%, var(--surface-raised)); --control-track-border: var(--border-strong); --control-selected-bg: var(--primary-color); --control-selected-ink: var(--ink-inverse); /* A segment whose selection carries a threshold priority: the pill takes the priority hue. Orange and red are deepened until white ink clears AA (the --priority-*-solid fills); no yellow holds white ink, so the low pill keeps its yellow and takes dark ink. */ --control-selected-priority-low-bg: var(--priority-low); --control-selected-priority-low-ink: var(--fixed-light-ink-strong); --control-selected-priority-normal-bg: var(--priority-normal-solid); --control-selected-priority-high-bg: var(--priority-high-solid); /* Toggle groups (c-tabs__nav--toggles): several segments can be on at once, row after row, so "on" is a quiet tint rather than a pill. */ --control-toggle-on-bg: color-mix(in oklch, var(--primary-color) 13%, var(--surface-raised)); --control-toggle-on-ink: var(--primary-color); --control-toggle-on-border: color-mix(in oklch, var(--primary-color) 35%, transparent); --border-input: var(--neutral-300); --focus-ring: var(--primary-rgba-15); --backdrop-bg: rgb(2 15 42 / 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); /* Threshold priority: an alert's severity is one warm ladder — low yellow, normal orange, high red. Every surface that colours a threshold by its priority reads these roles and never picks a status hue itself. They alias the --status-* roles, so dark mode follows without overrides. A -solid fill is deep enough for white ink; no yellow is, so low has none and a filled low surface keeps its yellow under dark ink instead. */ --priority-low: var(--caution-color); --priority-low-fg: var(--status-caution-fg); --priority-low-bg: var(--status-caution-bg); --priority-low-border: var(--status-caution-border); --priority-normal: var(--orange-color); --priority-normal-fg: var(--status-error-fg); --priority-normal-bg: var(--status-error-bg); --priority-normal-border: var(--status-error-border); --priority-normal-solid: color-mix(in oklab, var(--orange-dark), var(--fixed-light-ink-strong) 18%); --priority-high: var(--danger-color); --priority-high-fg: var(--status-danger-fg); --priority-high-bg: var(--status-danger-bg); --priority-high-border: var(--status-danger-border); --priority-high-solid: var(--danger-dark); /* 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: rgb(255 255 255 / 95%); --on-dark-ink-default: rgb(255 255 255 / 85%); --on-dark-ink-muted: rgb(255 255 255 / 60%); --on-dark-ink-subtle: rgb(255 255 255 / 40%); --on-dark-surface: rgb(255 255 255 / 10%); --on-dark-surface-hover: rgb(255 255 255 / 15%); --on-dark-surface-active: rgb(255 255 255 / 20%); --on-dark-border: rgb(255 255 255 / 18%); --on-dark-border-strong: rgb(255 255 255 / 30%); /* Fixed light popover roles for controls which deliberately stay light while sitting on an always-dark page header. */ --fixed-light-surface: #fff; --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); /* 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-caution: var(--caution-color); --chart-orange: var(--orange-color); --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); /* Forecast: what has not happened yet. It takes its own hue, apart from the measured primary and from every status colour, so a prediction never reads as a reading or as a warning. The ink is the hue pulled toward --ink-strong, which darkens it on white and lightens it on navy, so one formula holds text contrast in both themes. */ --chart-forecast: var(--accent-purple); --chart-forecast-band: color-mix(in srgb, var(--chart-forecast) 14%, transparent); --chart-forecast-zone: color-mix(in srgb, var(--chart-forecast) 5%, transparent); --forecast-ink: color-mix(in oklab, var(--chart-forecast), var(--ink-strong) 30%); /* Threshold overlay. The zone is the region a limit forbids and covers a large area, so it stays faint; the band is a step stronger and edges the zone. Breaches themselves are drawn in the status rail under the time axis, in the limit's own line colour, which is the threshold's priority hue. */ --chart-priority-low: var(--priority-low); --chart-priority-low-zone: color-mix(in srgb, var(--chart-priority-low) 5%, transparent); --chart-priority-low-band: color-mix(in srgb, var(--chart-priority-low) 10%, transparent); --chart-priority-normal: var(--priority-normal); --chart-priority-normal-zone: color-mix(in srgb, var(--chart-priority-normal) 5%, transparent); --chart-priority-normal-band: color-mix(in srgb, var(--chart-priority-normal) 10%, transparent); --chart-priority-high: var(--priority-high); --chart-priority-high-zone: color-mix(in srgb, var(--chart-priority-high) 5%, transparent); --chart-priority-high-band: color-mix(in srgb, var(--chart-priority-high) 10%, transparent); /* Offline is absent data, not bad data: in the status rail it is a neutral stroke, so the break in the line is confirmed without competing with a breach's hue. */ --chart-offline: color-mix(in srgb, var(--chart-secondary) 45%, 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; } /* ===== BRAND RAMP DERIVATION ===== Each step keeps --business-primary's hue, turned by the step's offset, at a fixed oklch lightness and chroma. For #060d47 every step resolves to exactly the hex fallback in :root; a new --business-primary re-lights the whole ramp. Guarded because an unsupported relative colour would leave every consumer of the token with no colour at all, where the fallback keeps today's palette. hue-degree-notation is off for this block: it misreads the lightness after `from ` as a hue, and its autofix (`0.208deg`, or `calc(h - 7.7deg)`) makes the colour invalid — every consumer would paint black. */ /* stylelint-disable hue-degree-notation */ @supports (color: oklch(from red l c h)) { :root { --brand-abyss: oklch(from var(--business-primary) 0.208 0.090 calc(h - 3.2)); --brand-abyss-deep: oklch(from var(--business-primary) 0.176 0.059 calc(h - 8.2)); --brand-abyss-deepest: oklch(from var(--business-primary) 0.146 0.043 calc(h - 12.1)); --brand-abyss-floor: oklch(from var(--business-primary) 0.120 0.030 calc(h - 12.1)); --brand-deep-current: oklch(from var(--business-primary) 0.453 0.173 calc(h - 7.7)); --brand-shoal: oklch(from var(--business-primary) 0.640 0.182 calc(h - 13.8)); --brand-sky: oklch(from var(--business-primary) 0.785 0.138 calc(h - 39.4)); --brand-sky-light: oklch(from var(--business-primary) 0.828 0.121 calc(h - 45.8)); --brand-sky-lighter: oklch(from var(--business-primary) 0.867 0.102 calc(h - 51.0)); } } /* stylelint-enable hue-degree-notation */