/* ═══════════════════════════════════════════════════════════════════ tokens/semantic.css Semantic design tokens — meaningful names that describe usage. These consume primitives and provide the API for components. Load AFTER primitives.css, BEFORE bootstrap-map.css. ═══════════════════════════════════════════════════════════════════ */ @layer tokens { /* ══ LIGHT THEME (default) — modernized 2026-05-27 ═════════════ Refined from Tailwind `gray-*` (warm-tinted) to `slate-*` (cooler, more refined) for a contemporary admin-dashboard feel. The shift is subtle — each value moves by a few hex points — but the overall palette reads as "Linear / Vercel / Stripe" rather than "Bootstrap defaults". */ :root { /* ── Surfaces ────────────────────────────────────────────── */ /* Two parallel surface vocabularies coexist: (1) Legacy: --surface-bg / --surface-base / --surface-muted / --surface-overlay. Predates the elevation refresh; still referenced by ~80 files. Aliased to the new tier below so the two systems can't drift apart. (2) New (elevation refresh): --surface-0..3. Tier-numbered so callers compose against elevation tokens consistently. DO NOT add a third vocabulary. When touching surface code, prefer the tier-numbered form. Legacy aliases will be removed once usage audit reaches zero. */ --surface-0: var(--color-gray-50); /* page background */ --surface-1: var(--color-white); /* card background */ --surface-2: var(--color-gray-100); /* section background */ --surface-3: var(--color-gray-200); /* elevated surface */ /* Legacy aliases — map onto the new tier so both systems return the same color. Removing these requires migrating ~80 callsites. */ --surface-bg: var(--surface-0); --surface-base: var(--surface-1); --surface-muted: var(--surface-2); --surface-overlay: color-mix(in srgb, var(--surface-1) 85%, transparent); --elevation-1: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06); --elevation-2: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06); --elevation-3: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05); /* ── Typography (semantic) ───────────────────────────────── */ --type-page-title: var(--font-size-3xl); --type-section-title: var(--font-size-lg); --type-card-title: var(--font-size-sm); --type-body: var(--font-size-base); --type-body-small: var(--font-size-sm); --type-meta: var(--font-size-xs); --type-code: var(--font-size-sm); /* ── Text colors ─────────────────────────────────────────── */ --color-text-base: #475569; /* slate-600 — cooler body text */ --color-text-heading: #0f172a; /* slate-900 — deeper headings */ --color-text-primary: #0f172a; --color-text-secondary: #475569; /* slate-500 on white = ~5.0:1, AA pass. Was #94a3b8 (slate-400) at ~3.0:1 — borderline. Dark theme uses #94a3b8 on slate-900 for the same target ratio in reverse. */ --color-text-muted: #64748b; --color-text-inverse: #ffffff; --color-text-link: #6366f1; /* ── Border colors ───────────────────────────────────────── */ --border-base: #e2e8f0; /* slate-200 — cooler */ --border-light: #f1f5f9; /* slate-100 — cleaner */ --border-strong: #cbd5e1; /* slate-300 — cooler */ /* ── Input states ────────────────────────────────────────── */ --input-bg: #f1f5f9; --input-border: #e5e7eb; --input-focus-border: color-mix(in srgb, var(--color-primary) 45%, transparent); --input-focus-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 10%, transparent); /* ── Table states ────────────────────────────────────────── */ --table-border: #eef2f7; --table-hover: color-mix(in srgb, var(--color-primary) 4%, transparent); --table-stripe: color-mix(in srgb, var(--color-black) 2%, transparent); /* ── Sidebar ────────────────────────────────────────────────── `--sidebar-hover-text` and `--sidebar-active-bg` were hardcoded `#635bff` (close to but not identical to brand `#6366f1`). Unified to `--color-primary` so the sidebar's interactive accent matches every other brand-accent in the app. */ --sidebar-bg: var(--surface-base); --sidebar-border: #e5eaef; --sidebar-text: #2a3547; --sidebar-icon: #5a6a85; --sidebar-hover-bg: transparent; --sidebar-hover-text: var(--color-primary); --sidebar-active-bg: var(--color-primary); --sidebar-active-text: var(--color-white); --sidebar-active-shadow: 0 17px 20px -8px color-mix(in srgb, var(--color-primary) 28%, transparent); /* ── Card states ───────────────────────────────────────────── NOTE: `--card-bg`, `--card-border`, `--card-shadow`, `--card-shadow-hover` are intentionally NOT redefined here. The unlayered :root block at the bottom of this file owns those legacy aliases and points them at the new semantic tokens (`--surface-base`, `--border-base`, `--shadow-sm`, `--shadow-md`). The layered redefinition was shadowed by legacy/app-legacy.css's unlayered :root anyway. */ --card-border-hover: color-mix(in srgb, var(--color-primary) 18%, transparent); /* ── Search component ────────────────────────────────────── */ --search-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent); --search-result-shadow: 0 8px 32px color-mix(in srgb, var(--color-text-heading) 12%, transparent), 0 2px 8px color-mix(in srgb, var(--color-text-heading) 6%, transparent); --search-result-bg: color-mix(in srgb, var(--color-white) 85%, transparent); --search-result-bg-solid: color-mix(in srgb, var(--color-white) 90%, transparent); --search-empty-shadow: var(--card-shadow); --back-btn-shadow: 0 8px 24px color-mix(in srgb, var(--color-text-heading) 12%, transparent); /* ── Topbar component ────────────────────────────────────── */ --topbar-error-shadow: 0 1px 3px color-mix(in srgb, var(--color-danger) 35%, transparent); /* ── State layers ────────────────────────────────────────── */ --state-hover: color-mix(in srgb, var(--color-white) 6%, transparent); --state-active: color-mix(in srgb, var(--color-primary) 12%, transparent); --state-selected: color-mix(in srgb, var(--color-primary) 18%, transparent); /* ── Wizard component states ─────────────────────────────── */ --wizard-success-tint: color-mix(in srgb, var(--color-success-light) 2%, transparent); --wizard-success-overlay: color-mix(in srgb, var(--color-success-light) 6%, transparent); --wizard-success-border: color-mix(in srgb, var(--color-success-light) 20%, transparent); --wizard-success-footer-bg: color-mix(in srgb, var(--color-success-light) 3%, transparent); --wizard-cloud-shadow: color-mix(in srgb, var(--color-primary) 25%, transparent); --wizard-cloud-shadow-hover: color-mix(in srgb, var(--color-primary) 35%, transparent); --wizard-success-shadow: color-mix(in srgb, var(--color-success-light) 25%, transparent); --wizard-success-shadow-hover: color-mix(in srgb, var(--color-success-light) 35%, transparent); --wizard-success-burst-0: color-mix(in srgb, var(--color-success-light) 50%, transparent); --wizard-success-burst-50: color-mix(in srgb, var(--color-success-light) 15%, transparent); --wizard-success-burst-100: color-mix(in srgb, var(--color-success-light) 0%, transparent); --wizard-danger-tint: color-mix(in srgb, var(--color-danger-light) 2%, transparent); --wizard-danger-overlay: color-mix(in srgb, var(--color-danger-light) 8%, transparent); --wizard-success-icon-bg: color-mix(in srgb, var(--color-success-light) 8%, transparent); /* ── Selection cards component states ────────────────────── */ --selection-card-shadow: color-mix(in srgb, var(--color-primary) 10%, transparent); --selection-card-shadow-hover: color-mix(in srgb, var(--color-primary) 15%, transparent); /* ── Cloud component variants ──────────────────────────────── Unified at the unlayered :root blocks at the bottom of this file — see the cloud-family redirect note there. */ /* ── Code block variants ─────────────────────────────────── */ --code-bg: #1e1e1e; --code-text: #d4d4d4; --code-error: #ff6b6b; /* ── Button focus states ─────────────────────────────────── */ --btn-cloud-focus: color-mix(in srgb, var(--cloud) 28%, transparent); --btn-danger-focus: color-mix(in srgb, var(--bs-danger) 28%, transparent); --btn-success-focus: color-mix(in srgb, var(--bs-success) 28%, transparent); --btn-warning-focus: color-mix(in srgb, var(--bs-warning) 32%, transparent); --btn-primary-shadow: color-mix(in srgb, var(--cloud) 22%, transparent); /* ── Form focus states ───────────────────────────────────── */ --form-cloud-focus: color-mix(in srgb, var(--cloud) 22%, transparent); --form-danger-focus: color-mix(in srgb, var(--bs-danger) 22%, transparent); --form-success-focus: color-mix(in srgb, var(--bs-success) 22%, transparent); /* ── Table states ────────────────────────────────────────── */ --cloud-bg-light: color-mix(in srgb, var(--cloud) 4%, transparent); /* ── Modal variants ──────────────────────────────────────── */ --modal-overlay-bg: color-mix(in srgb, var(--color-black) 50%, transparent); --modal-shadow: 0 8px 32px color-mix(in srgb, var(--color-black) 20%, transparent); --dropdown-shadow: 0 8px 24px color-mix(in srgb, var(--color-black) 12%, transparent); /* ── Ownership status variants ───────────────────────────── */ --ownership-success-bg: color-mix(in srgb, var(--bs-success) 12%, transparent); --ownership-warning-bg: color-mix(in srgb, var(--bs-warning) 18%, transparent); --ownership-danger-bg: color-mix(in srgb, var(--bs-danger) 12%, transparent); /* ── License component variants ──────────────────────────── */ --license-icon-bg: color-mix(in srgb, var(--cloud) 18%, white); --license-gauge-bg: color-mix(in srgb, var(--border) 60%, white); /* ── Log analyzer variants ───────────────────────────────── */ --log-analyzer-icon-bg: color-mix(in srgb, var(--color-black) 5%, transparent); /* ── Landing page variants (dark theme only) ─────────────── */ --landing-surface: color-mix(in srgb, var(--color-white) 4%, transparent); --landing-surface-hover: color-mix(in srgb, var(--color-white) 7%, transparent); --landing-surface-elevated: color-mix(in srgb, var(--color-white) 5%, transparent); --landing-border: color-mix(in srgb, var(--color-white) 6%, transparent); --landing-border-hover: color-mix(in srgb, var(--color-white) 12%, transparent); --landing-border-light: color-mix(in srgb, var(--color-white) 5%, transparent); --landing-cloud-border: color-mix(in srgb, var(--color-primary) 20%, transparent); --landing-text: #e2e8f0; --landing-text-hover: #f8fafc; --landing-text-muted: #94a3b8; --landing-text-secondary: #cbd5e1; --landing-heading: #f1f5f9; --landing-footer-text: #475569; --landing-footer-link: #64748b; --landing-cloud-accent: #38bdf8; --landing-card-shadow: 0 8px 24px color-mix(in srgb, var(--color-black) 20%, transparent); --landing-icon-shadow-cloud: 0 4px 16px color-mix(in srgb, var(--color-primary) 30%, transparent); --landing-icon-shadow-success: 0 4px 16px color-mix(in srgb, var(--color-emerald) 30%, transparent); --landing-icon-shadow-purple: 0 4px 16px color-mix(in srgb, var(--color-purple) 30%, transparent); --gradient-cloud: linear-gradient(135deg, #0ea5e9, #38bdf8); --gradient-purple: linear-gradient(135deg, #8b5cf6, #a855f7); /* ── Colored surfaces (for stat cards, badges, etc.) ─────── */ --surface-sky: color-mix(in srgb, var(--color-primary) 8%, transparent); --surface-cyan: color-mix(in srgb, var(--color-cyan) 8%, transparent); --surface-purple: color-mix(in srgb, var(--color-purple) 8%, transparent); --surface-teal: color-mix(in srgb, var(--color-teal) 8%, transparent); --surface-slate: color-mix(in srgb, var(--color-text-secondary) 8%, transparent); --surface-success: color-mix(in srgb, var(--color-success-light) 8%, transparent); --surface-warning: color-mix(in srgb, var(--color-warning) 8%, transparent); --surface-danger: color-mix(in srgb, var(--color-danger-light) 8%, transparent); --surface-info: color-mix(in srgb, var(--color-info) 8%, transparent); --surface-primary: color-mix(in srgb, var(--color-primary) 8%, transparent); /* ── State text colors ───────────────────────────────────── */ --text-success: #166534; --text-warning: #92400e; --text-danger: #991b1b; --text-info: #0c4a6e; /* ── Activity / insight panel surfaces ───────────────────── */ /* Background of the clickable .activity-panel__summary row. Light theme uses the lighter gray (gray-100), dark theme the darker gray (gray-800); see semantic.css [dark] block. */ --surface-summary-row: var(--bs-gray-100); /* Background of the .insight-panel + .insight-card--standalone container. Bootstrap light theme has --bs-body-bg as white. */ --surface-insight-panel: var(--bs-body-bg, white); /* ── Gauge glow shadows ──────────────────────────────────── */ --gauge-success-glow: 0 0 8px color-mix(in srgb, var(--color-success-light) 30%, transparent); --gauge-info-glow: 0 0 8px color-mix(in srgb, var(--color-info) 30%, transparent); --gauge-warning-glow: 0 0 8px color-mix(in srgb, var(--color-warning) 30%, transparent); --gauge-danger-glow: 0 0 8px color-mix(in srgb, var(--color-danger-light) 30%, transparent); /* ── Gauge gradients ─────────────────────────────────────── */ --gradient-warning: linear-gradient(90deg, #eab308, #facc15); --gradient-success: linear-gradient(90deg, #22c55e, #4ade80); --gradient-info: linear-gradient(90deg, #3b82f6, #60a5fa); --gradient-danger: linear-gradient(90deg, #ef4444, #f87171); /* ── Overlay/backdrop ────────────────────────────────────── */ --overlay-hover: color-mix(in srgb, var(--color-black) 5%, transparent); --sidebar-overlay: color-mix(in srgb, var(--color-black) 50%, transparent); /* ── Brand gradients ────────────────────────────────────── */ /* WordPress brand colors (documented exception) */ --gradient-wordpress: linear-gradient(90deg, #21759b, #0073aa, #00a0d2); /* ── Portal brand colors ─────────────────────────────────── */ /* Client portal (teal/green) */ --portal-client-bg: #f4fbf8; --portal-client-surface: #ffffff; --portal-client-border: color-mix(in srgb, var(--color-emerald) 14%, transparent); --portal-client-active-bg: color-mix(in srgb, var(--color-emerald) 12%, transparent); --portal-client-active-text: #059669; --portal-client-active-border: #10b981; --portal-client-brand: #10b981; --portal-client-brand-light: #34d399; --portal-client-brand-dark: #059669; --portal-client-brand-bg: color-mix(in srgb, var(--color-emerald) 7%, transparent); --portal-client-brand-glow: color-mix(in srgb, var(--color-emerald) 25%, transparent); --gradient-client: linear-gradient(135deg, #10b981, #14b8a6); /* Reseller portal (purple/violet) */ --portal-reseller-bg: #faf7ff; --portal-reseller-surface: #ffffff; --portal-reseller-border: color-mix(in srgb, var(--color-purple) 14%, transparent); --portal-reseller-active-bg: color-mix(in srgb, var(--color-purple) 12%, transparent); --portal-reseller-active-text: #7c3aed; --portal-reseller-active-border: #8b5cf6; --portal-reseller-brand: #8b5cf6; --portal-reseller-brand-light: #a78bfa; --portal-reseller-brand-dark: #7c3aed; --portal-reseller-brand-bg: color-mix(in srgb, var(--color-purple) 7%, transparent); --portal-reseller-brand-glow: color-mix(in srgb, var(--color-purple) 25%, transparent); --gradient-reseller: linear-gradient(135deg, #8b5cf6, #a855f7); /* ── Popover / inline code surfaces (light theme) ────────── */ --surface-popover: var(--bs-body-bg, white); --surface-inline-code: var(--bs-gray-100); /* ── Wizard glassmorphism surfaces (light theme) ─────────── */ --wizard-progress-glass-bg: color-mix(in srgb, var(--surface-base) 85%, transparent); --wizard-progress-border: var(--card-border); --wizard-progress-fill-glow: var(--cloud-glow); --wizard-progress-shimmer-overlay: color-mix(in srgb, var(--color-white) 30%, transparent); --wizard-progress-inset-shadow: 0 0 0 1px color-mix(in srgb, var(--color-white) 50%, transparent) inset; --wizard-sidebar-glass-bg: color-mix(in srgb, var(--surface-base) 85%, transparent); --wizard-sidebar-border: var(--card-border); --wizard-invalid-bg: color-mix(in srgb, var(--color-danger-light) 2%, transparent); --wizard-label-pill-bg: var(--content-bg); --wizard-label-pill-border: var(--border); } /* ══ DARK THEME ════════════════════════════════════════════════ */ [data-bs-theme="dark"] { /* ── Surfaces (dark theme) ───────────────────────────────── */ /* Override the tier surfaces directly; legacy aliases inherit via the var(--surface-N) chain in :root. Dark tiers progress from page bg → card bg → elevated card. */ --surface-0: #0f172a; --surface-1: #1e293b; --surface-2: #334155; --surface-3: #475569; /* Legacy aliases re-resolved on the dark tier — kept for files that haven't migrated yet. */ --surface-bg: var(--surface-0); --surface-base: var(--surface-1); --surface-muted: var(--surface-2); --surface-overlay: color-mix(in srgb, var(--color-text-heading) 92%, transparent); /* Dark elevation — black shadows are invisible on dark backgrounds. Use a subtle white "inner glow" via inset shadows + a tiny outer drop. Reads as depth without the muddy black- on-black smear that the light-theme values would produce. */ --elevation-1: inset 0 0 0 1px rgba(255,255,255,0.04), 0 1px 2px rgba(0,0,0,0.4); --elevation-2: inset 0 0 0 1px rgba(255,255,255,0.06), 0 4px 8px rgba(0,0,0,0.45); --elevation-3: inset 0 0 0 1px rgba(255,255,255,0.08), 0 10px 20px rgba(0,0,0,0.5); /* ── Text colors ─────────────────────────────────────────── */ --color-text-base: #cbd5e1; --color-text-heading: #e7eaf0; --color-text-primary: #f1f5f9; --color-text-secondary: #94a3b8; /* Light value here (#94a3b8 = slate-400). Was #64748b which is slate-500 — readable on white but ~2.4:1 on slate-900 dark page, fails WCAG AA. slate-400 gives ~4.6:1, AA pass. */ --color-text-muted: #94a3b8; --color-text-inverse: #0f172a; --color-text-link: #818cf8; /* ── Border colors ───────────────────────────────────────── */ --border-base: #334155; --border-light: #1e293b; --border-strong: #475569; /* ── Input states ────────────────────────────────────────── */ --input-bg: #1e293b; --input-border: #334155; --input-focus-border: color-mix(in srgb, var(--color-primary) 70%, transparent); --input-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent); /* ── Table states ────────────────────────────────────────── */ --table-border: #334155; --table-hover: color-mix(in srgb, var(--color-primary) 6%, transparent); --table-stripe: color-mix(in srgb, var(--color-white) 2%, transparent); /* ── Sidebar (dark theme) ──────────────────────────────────── */ --sidebar-bg: #2a3547; --sidebar-border: var(--border-base); --sidebar-text: #adbcce; --sidebar-icon: #8896ac; --sidebar-hover-bg: transparent; --sidebar-hover-text: var(--color-white); --sidebar-active-bg: var(--color-primary); --sidebar-active-text: var(--color-white); --sidebar-active-shadow: 0 17px 20px -8px color-mix(in srgb, var(--color-primary) 40%, transparent); /* ── Card states ───────────────────────────────────────────── Card tokens unified at the unlayered :root blocks at the bottom of this file — see note in the light-theme section. */ --card-border-hover: color-mix(in srgb, var(--color-primary) 30%, transparent); /* ── Search component ────────────────────────────────────── */ --search-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent); --search-result-shadow: 0 8px 32px color-mix(in srgb, var(--color-black) 24%, transparent), 0 2px 8px color-mix(in srgb, var(--color-black) 12%, transparent); --search-result-bg: color-mix(in srgb, var(--color-text-heading) 92%, transparent); --search-result-bg-solid: color-mix(in srgb, var(--color-text-heading) 95%, transparent); --search-empty-shadow: var(--card-shadow); --back-btn-shadow: 0 8px 24px color-mix(in srgb, var(--color-black) 24%, transparent); /* ── Topbar component ────────────────────────────────────── */ --topbar-error-shadow: 0 1px 3px color-mix(in srgb, var(--color-danger) 35%, transparent); /* ── Wizard component states ─────────────────────────────── */ --wizard-success-tint: color-mix(in srgb, var(--color-success-light) 2%, transparent); --wizard-success-overlay: color-mix(in srgb, var(--color-success-light) 6%, transparent); --wizard-success-border: color-mix(in srgb, var(--color-success-light) 20%, transparent); --wizard-success-footer-bg: color-mix(in srgb, var(--color-success-light) 3%, transparent); --wizard-cloud-shadow: color-mix(in srgb, var(--color-primary) 25%, transparent); --wizard-cloud-shadow-hover: color-mix(in srgb, var(--color-primary) 35%, transparent); --wizard-success-shadow: color-mix(in srgb, var(--color-success-light) 25%, transparent); --wizard-success-shadow-hover: color-mix(in srgb, var(--color-success-light) 35%, transparent); --wizard-success-burst-0: color-mix(in srgb, var(--color-success-light) 50%, transparent); --wizard-success-burst-50: color-mix(in srgb, var(--color-success-light) 15%, transparent); --wizard-success-burst-100: color-mix(in srgb, var(--color-success-light) 0%, transparent); --wizard-danger-tint: color-mix(in srgb, var(--color-danger-light) 2%, transparent); --wizard-danger-overlay: color-mix(in srgb, var(--color-danger-light) 8%, transparent); --wizard-success-icon-bg: color-mix(in srgb, var(--color-success-light) 8%, transparent); /* ── Selection cards component states ────────────────────── */ --selection-card-shadow: color-mix(in srgb, var(--color-primary) 10%, transparent); --selection-card-shadow-hover: color-mix(in srgb, var(--color-primary) 15%, transparent); /* ── Cloud component variants ──────────────────────────────── Unified at the unlayered :root blocks at the bottom of this file — see the cloud-family redirect note there. */ /* ── Code block variants ─────────────────────────────────── */ --code-bg: #1e1e1e; --code-text: #d4d4d4; --code-error: #ff6b6b; /* ── Button focus states ─────────────────────────────────── */ --btn-cloud-focus: color-mix(in srgb, var(--cloud) 28%, transparent); --btn-danger-focus: color-mix(in srgb, var(--bs-danger) 28%, transparent); --btn-success-focus: color-mix(in srgb, var(--bs-success) 28%, transparent); --btn-warning-focus: color-mix(in srgb, var(--bs-warning) 32%, transparent); --btn-primary-shadow: color-mix(in srgb, var(--cloud) 22%, transparent); /* ── Form focus states ───────────────────────────────────── */ --form-cloud-focus: color-mix(in srgb, var(--cloud) 22%, transparent); --form-danger-focus: color-mix(in srgb, var(--bs-danger) 22%, transparent); --form-success-focus: color-mix(in srgb, var(--bs-success) 22%, transparent); /* ── Table states ────────────────────────────────────────── */ --cloud-bg-light: color-mix(in srgb, var(--cloud) 4%, transparent); /* ── Modal variants ──────────────────────────────────────── */ --modal-overlay-bg: color-mix(in srgb, var(--color-black) 50%, transparent); --modal-shadow: 0 8px 32px color-mix(in srgb, var(--color-black) 20%, transparent); --dropdown-shadow: 0 8px 24px color-mix(in srgb, var(--color-black) 12%, transparent); /* ── Ownership status variants ───────────────────────────── */ --ownership-success-bg: color-mix(in srgb, var(--bs-success) 12%, transparent); --ownership-warning-bg: color-mix(in srgb, var(--bs-warning) 18%, transparent); --ownership-danger-bg: color-mix(in srgb, var(--bs-danger) 12%, transparent); /* ── License component variants ──────────────────────────── */ --license-icon-bg: color-mix(in srgb, var(--cloud) 18%, white); --license-gauge-bg: color-mix(in srgb, var(--border) 60%, white); /* ── Log analyzer variants ───────────────────────────────── */ --log-analyzer-icon-bg: color-mix(in srgb, var(--color-black) 5%, transparent); /* ── Landing page variants (dark theme only) ─────────────── */ --landing-surface: color-mix(in srgb, var(--color-white) 4%, transparent); --landing-surface-hover: color-mix(in srgb, var(--color-white) 7%, transparent); --landing-surface-elevated: color-mix(in srgb, var(--color-white) 5%, transparent); --landing-border: color-mix(in srgb, var(--color-white) 6%, transparent); --landing-border-hover: color-mix(in srgb, var(--color-white) 12%, transparent); --landing-border-light: color-mix(in srgb, var(--color-white) 5%, transparent); --landing-cloud-border: color-mix(in srgb, var(--color-primary) 20%, transparent); --landing-text: #e2e8f0; --landing-text-hover: #f8fafc; --landing-text-muted: #94a3b8; --landing-text-secondary: #cbd5e1; --landing-heading: #f1f5f9; --landing-footer-text: #475569; --landing-footer-link: #64748b; --landing-cloud-accent: #38bdf8; --landing-card-shadow: 0 8px 24px color-mix(in srgb, var(--color-black) 20%, transparent); --landing-icon-shadow-cloud: 0 4px 16px color-mix(in srgb, var(--color-primary) 30%, transparent); --landing-icon-shadow-success: 0 4px 16px color-mix(in srgb, var(--color-emerald) 30%, transparent); --landing-icon-shadow-purple: 0 4px 16px color-mix(in srgb, var(--color-purple) 30%, transparent); --gradient-cloud: linear-gradient(135deg, #0ea5e9, #38bdf8); --gradient-purple: linear-gradient(135deg, #8b5cf6, #a855f7); /* ── Colored surfaces (for stat cards, badges, etc.) ─────── */ --surface-sky: color-mix(in srgb, var(--color-primary) 12%, transparent); --surface-cyan: color-mix(in srgb, var(--color-cyan) 12%, transparent); --surface-purple: color-mix(in srgb, var(--color-purple) 12%, transparent); --surface-teal: color-mix(in srgb, var(--color-teal) 12%, transparent); --surface-slate: color-mix(in srgb, var(--color-text-secondary) 12%, transparent); --surface-success: color-mix(in srgb, var(--color-success-light) 12%, transparent); --surface-warning: color-mix(in srgb, var(--color-warning) 12%, transparent); --surface-danger: color-mix(in srgb, var(--color-danger-light) 12%, transparent); --surface-info: color-mix(in srgb, var(--color-info) 12%, transparent); --surface-primary: color-mix(in srgb, var(--color-primary) 12%, transparent); /* ── State text colors ───────────────────────────────────── */ --text-success: #86efac; --text-warning: #fcd34d; --text-danger: #fca5a5; --text-info: #7dd3fc; /* ── Gauge glow shadows ──────────────────────────────────── */ --gauge-success-glow: 0 0 8px color-mix(in srgb, var(--color-success-light) 40%, transparent); --gauge-info-glow: 0 0 8px color-mix(in srgb, var(--color-info) 40%, transparent); --gauge-warning-glow: 0 0 8px color-mix(in srgb, var(--color-warning) 40%, transparent); --gauge-danger-glow: 0 0 8px color-mix(in srgb, var(--color-danger-light) 40%, transparent); /* ── Gauge gradients ─────────────────────────────────────── */ --gradient-warning: linear-gradient(90deg, #eab308, #facc15); --gradient-success: linear-gradient(90deg, #22c55e, #4ade80); --gradient-info: linear-gradient(90deg, #3b82f6, #60a5fa); --gradient-danger: linear-gradient(90deg, #ef4444, #f87171); /* ── Activity / insight panel surfaces (dark theme) ───────── */ --surface-summary-row: var(--bs-gray-800); --surface-insight-panel: var(--bs-gray-900); /* ── Popover / inline code surfaces (dark theme) ─────────── */ --surface-popover: var(--bs-gray-800); --surface-inline-code: var(--bs-gray-700); /* ── Wizard glassmorphism surfaces (dark theme) ──────────── */ --wizard-progress-glass-bg: color-mix(in srgb, var(--color-text-heading) 70%, transparent); --wizard-progress-border: color-mix(in srgb, var(--color-text-muted) 12%, transparent); --wizard-progress-fill-glow: color-mix(in srgb, var(--color-info-light) 20%, transparent); --wizard-progress-shimmer-overlay: color-mix(in srgb, var(--color-white) 15%, transparent); --wizard-progress-inset-shadow: 0 0 0 1px color-mix(in srgb, var(--color-text-muted) 6%, transparent) inset; --wizard-sidebar-glass-bg: color-mix(in srgb, var(--color-text-heading) 60%, transparent); --wizard-sidebar-border: color-mix(in srgb, var(--color-text-muted) 10%, transparent); --wizard-invalid-bg: color-mix(in srgb, var(--color-danger-light) 5%, transparent); --wizard-label-pill-bg: color-mix(in srgb, var(--color-text-heading) 50%, transparent); --wizard-label-pill-border: color-mix(in srgb, var(--color-text-muted) 12%, transparent); /* ── Overlay/backdrop ────────────────────────────────────── */ --overlay-hover: color-mix(in srgb, var(--color-white) 8%, transparent); --sidebar-overlay: color-mix(in srgb, var(--color-black) 60%, transparent); /* ── Portal dark theme sidebar ───────────────────────────── */ --portal-client-bg: rgba(7, 26, 18, 0.94); --portal-client-surface: #0a2119; --portal-client-border: color-mix(in srgb, var(--color-emerald) 10%, transparent); --portal-client-active-bg: color-mix(in srgb, var(--color-emerald) 12%, transparent); --portal-client-active-text: #34d399; --portal-client-active-border: #10b981; --portal-reseller-bg: rgba(17, 11, 32, 0.94); --portal-reseller-surface: #170f2a; --portal-reseller-border: color-mix(in srgb, var(--color-purple) 10%, transparent); --portal-reseller-active-bg: color-mix(in srgb, var(--color-purple) 12%, transparent); --portal-reseller-active-text: #a78bfa; --portal-reseller-active-border: #8b5cf6; /* ── Devise auth glassmorphism ───────────────────────────── */ /* Base auth page background */ --devise-bg: #0b1120; /* Mesh gradient overlays (documented glassmorphism exception) */ --devise-mesh-base: radial-gradient(ellipse at 20% 50%, color-mix(in srgb, var(--color-primary) 15%, transparent) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, color-mix(in srgb, var(--color-cyan) 12%, transparent) 0%, transparent 50%), radial-gradient(ellipse at 60% 80%, color-mix(in srgb, var(--color-purple) 10%, transparent) 0%, transparent 50%); --devise-mesh-client: radial-gradient(ellipse at 20% 50%, color-mix(in srgb, var(--color-emerald) 18%, transparent) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, color-mix(in srgb, var(--color-teal) 14%, transparent) 0%, transparent 50%), radial-gradient(ellipse at 60% 80%, color-mix(in srgb, var(--color-success-light) 10%, transparent) 0%, transparent 50%); --devise-mesh-reseller: radial-gradient(ellipse at 20% 50%, color-mix(in srgb, var(--color-purple) 18%, transparent) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, color-mix(in srgb, var(--color-purple) 14%, transparent) 0%, transparent 50%), radial-gradient(ellipse at 60% 80%, color-mix(in srgb, var(--color-purple-light) 10%, transparent) 0%, transparent 50%); /* Card glassmorphism */ --devise-card-border: color-mix(in srgb, var(--color-text-muted) 10%, transparent); --devise-card-bg: color-mix(in srgb, var(--color-text-heading) 60%, transparent); --devise-card-shadow: 0 8px 32px color-mix(in srgb, var(--color-black) 40%, transparent), inset 0 1px 0 color-mix(in srgb, var(--color-white) 4%, transparent); /* Form glassmorphism */ --devise-form-bg: color-mix(in srgb, var(--color-white) 4%, transparent); --devise-form-bg-focus: color-mix(in srgb, var(--color-white) 6%, transparent); --devise-form-border: color-mix(in srgb, var(--color-text-muted) 12%, transparent); --devise-form-placeholder: color-mix(in srgb, var(--color-text-muted) 35%, transparent); --devise-check-bg: color-mix(in srgb, var(--color-white) 6%, transparent); --devise-check-border: color-mix(in srgb, var(--color-text-muted) 20%, transparent); /* Text colors */ --devise-tagline: color-mix(in srgb, var(--color-text-muted) 60%, transparent); --devise-label: color-mix(in srgb, var(--color-text-muted) 70%, transparent); --devise-check-label: color-mix(in srgb, var(--color-text-muted) 65%, transparent); --devise-text-muted: color-mix(in srgb, var(--color-text-muted) 40%, transparent); --devise-link: color-mix(in srgb, var(--color-text-muted) 50%, transparent); --devise-link-hover: color-mix(in srgb, var(--color-text-muted) 85%, transparent); /* Button/element shadows */ --devise-icon-shadow: 0 0 24px color-mix(in srgb, var(--color-primary) 35%, transparent); --devise-icon-shadow-client: 0 0 24px color-mix(in srgb, var(--color-emerald) 35%, transparent); --devise-icon-shadow-reseller: 0 0 24px color-mix(in srgb, var(--color-purple) 35%, transparent); --devise-btn-shadow: 0 2px 12px color-mix(in srgb, var(--color-primary) 25%, transparent); --devise-btn-shadow-hover: 0 4px 20px color-mix(in srgb, var(--color-primary) 40%, transparent); --devise-btn-shadow-client: 0 2px 12px color-mix(in srgb, var(--color-emerald) 25%, transparent); --devise-btn-shadow-client-hover: 0 4px 20px color-mix(in srgb, var(--color-emerald) 40%, transparent); --devise-btn-shadow-reseller: 0 2px 12px color-mix(in srgb, var(--color-purple) 25%, transparent); --devise-btn-shadow-reseller-hover: 0 4px 20px color-mix(in srgb, var(--color-purple) 40%, transparent); /* Alert borders */ --devise-alert-danger-border: color-mix(in srgb, var(--color-danger-light) 15%, transparent); --devise-alert-success-border: color-mix(in srgb, var(--color-success-light) 15%, transparent); } } /* ═══════════════════════════════════════════════════════════════════ Legacy-token unification (2026-05-27) Standardizes the parallel-color problem: `legacy/app-legacy.css` defines `--text-primary`, `--text-secondary`, `--text-muted`, `--border-color`, `--card-bg`, `--card-border` as hardcoded hex values, while `@layer tokens` above defines `--color-text-heading`, `--color-text-secondary`, `--color-text-muted`, `--border-base`, `--surface-base` semantically. Components reference both, creating subtle drift (slate-900 vs slate-700, slate-200 vs slate-300, etc.). This block redirects the legacy names to the new semantic ones so all 264 callsites (`--text-primary` x41 + `--text-secondary` x38 + `--text-muted` x100 + `--border-color` x44 + `--card-bg` x41 + `--card-border` x32 + `--card-shadow` x18) read from a single source of truth. Why this is OUTSIDE `@layer tokens`: legacy/app-legacy.css declares these in an unlayered `:root` block. Per the CSS cascade spec, unlayered custom properties beat layered ones regardless of source order. To override, our redirect must also be unlayered AND defined after legacy in source order. Layout-head loads legacy.css before semantic.css, so this unlayered block (defined after semantic's @layer wrapper closes) overrides legacy via source order. Dark mode honored. ═══════════════════════════════════════════════════════════════════ */ :root { /* Text */ --text-primary: var(--color-text-heading); --text-secondary: var(--color-text-secondary); --text-muted: var(--color-text-muted); /* Surfaces */ --card-bg: var(--surface-base); --card-border: var(--border-base); --border-color: var(--border-base); /* `--card-shadow` legacy mapped to `--shadow-sm` in light theme but hardcoded a custom dark shadow. Unify on `--shadow-sm`. */ --card-shadow: var(--shadow-sm); --card-shadow-hover: var(--shadow-md); /* State colors — legacy file defined these as Tailwind-400 shades (lighter), while the canonical `--color-*` tokens use Tailwind-500 (medium). Map to the `-light` variants so existing components (8x --success, 5x --danger, 4x --warning, 3x --info refs) keep their visual tone. `--warning`/`--danger`/`--info` map 1:1 to the light variants by hex; only `--success` shifts slightly (`#34d399` → `#4ade80`, both emerald-400 tones). */ --success: var(--color-success-light); --warning: var(--color-warning-light); --danger: var(--color-danger-light); --info: var(--color-info-light); /* State bg tints — legacy used hardcoded rgba at 8%. Use color-mix with the new tokens at the same 8% opacity. */ --success-bg: color-mix(in srgb, var(--color-success-light) 8%, transparent); --warning-bg: color-mix(in srgb, var(--color-warning-light) 8%, transparent); --danger-bg: color-mix(in srgb, var(--color-danger-light) 8%, transparent); --info-bg: color-mix(in srgb, var(--color-info-light) 8%, transparent); /* Cloud family — legacy "sky-blue interactive accent" tokens used extensively (~170 refs) across wizard-panels (44), selection-cards (33), button-table-polish (13), settings-cards (5), and others as a synonym for "the brand accent". Redirect to the new `--color- primary` family so the brand identity (indigo) propagates everywhere instead of running parallel as sky-blue. Components that needed sky as a deliberate identity (contact-card, devise-auth, dashboard-infra, log-analyzer, landing-page) use hardcoded #0ea5e9 / #06b6d4 inline, which are unaffected. The `--cloud-bg-light` / `--btn-cloud-focus` / `--form-cloud-focus` tokens defined in `@layer tokens` above use `color-mix(... var(--cloud) X%, ...)` so they propagate automatically. */ --cloud: var(--color-primary); --cloud-light: var(--color-primary-light); --cloud-dark: var(--color-primary-hover); --cloud-bg: color-mix(in srgb, var(--color-primary) 7%, transparent); --cloud-border: color-mix(in srgb, var(--color-primary) 15%, transparent); --cloud-glow: color-mix(in srgb, var(--color-primary) 25%, transparent); /* Legacy-only tokens that match exact primitives values — redirect so the design system is the canonical source. All 1:1 value matches in light theme. */ --teal: var(--color-teal); --teal-bg: color-mix(in srgb, var(--color-teal) 8%, transparent); --shadow-base-color: var(--color-text-heading); --content-bg: var(--surface-bg); --ease: var(--ease-smooth); --duration: var(--duration-base); /* Composite transition tokens — duration + easing in one value */ --transition-fast: var(--duration-fast) var(--ease-smooth); --transition-base: var(--duration-base) var(--ease-smooth); } html[data-bs-theme="dark"] { --text-primary: var(--color-text-heading); --text-secondary: var(--color-text-secondary); --text-muted: var(--color-text-muted); --card-bg: var(--surface-base); --card-border: var(--border-base); --border-color: var(--border-base); --card-shadow: var(--shadow-sm); --card-shadow-hover: var(--shadow-md); --success: var(--color-success-light); --warning: var(--color-warning-light); --danger: var(--color-danger-light); --info: var(--color-info-light); --success-bg: color-mix(in srgb, var(--color-success-light) 10%, transparent); --warning-bg: color-mix(in srgb, var(--color-warning-light) 10%, transparent); --danger-bg: color-mix(in srgb, var(--color-danger-light) 10%, transparent); --info-bg: color-mix(in srgb, var(--color-info-light) 10%, transparent); --cloud: var(--color-primary); --cloud-light: var(--color-primary-light); --cloud-dark: var(--color-primary-hover); --cloud-bg: color-mix(in srgb, var(--color-primary) 9%, transparent); --cloud-border: color-mix(in srgb, var(--color-primary) 18%, transparent); --cloud-glow: color-mix(in srgb, var(--color-primary) 30%, transparent); /* Legacy-only tokens — dark theme variants */ --teal: var(--color-teal-light); --teal-bg: color-mix(in srgb, var(--color-teal-light) 10%, transparent); --shadow-base-color: var(--color-black); --content-bg: var(--surface-bg); --ease: var(--ease-smooth); --duration: var(--duration-base); --transition-fast: var(--duration-fast) var(--ease-smooth); --transition-base: var(--duration-base) var(--ease-smooth); }