/* IronLink - Base Styles & Design System */

/* Inter Variable — variable-axis Inter for opsz-aware optical sizing.
   The bundled rsms.me sheet registers 'Inter var' as the family. We keep
   'Inter' in --font-family for backwards compatibility — variable Inter is
   served first via @font-face, the static Google Fonts Inter that
   tenant-dashboard.css imports remains as fallback. */
@import url('https://rsms.me/inter/inter.css');

/* CSS Custom Properties - Design Tokens */
:root {
  /* === FPM DESIGN SYSTEM TOKENS === */

  /* --- Surface Hierarchy (4-layer depth) --- */
  --fpm-bg-deep: #0a0e14;
  --fpm-bg-base: #141c28;
  --fpm-bg-surface: rgba(255, 255, 255, 0.035);
  --fpm-bg-surface-hover: rgba(255, 255, 255, 0.055);
  --fpm-bg-surface-raised: rgba(255, 255, 255, 0.06);

  /* Recessed plot-area background ("the full pipe"). The chart-card
     applies this as a top-to-bottom gradient (transparent → tint), so
     the value is the FLOOR tint — bottom of the gradient. The top of
     the chart fades into the card body so the plot doesn't read as a
     framed grey box. */
  --fpm-bg-plot: rgba(0, 0, 0, 0.10);

  /* --- Borders & Dividers --- */
  --fpm-border-subtle: rgba(255, 255, 255, 0.04);
  --fpm-border-light: rgba(255, 255, 255, 0.06);
  --fpm-border-medium: rgba(255, 255, 255, 0.08);
  --fpm-border-strong: rgba(255, 255, 255, 0.14);
  --fpm-divider: rgba(255, 255, 255, 0.03);
  --fpm-divider-strong: rgba(255, 255, 255, 0.06);
  /* Showcase contract: row-hover is accent-tinted (not neutral white). */
  --fpm-row-hover: rgba(72, 209, 176, 0.08);
  --fpm-row-alt: rgba(255, 255, 255, 0.012);

  /* --- Text --- */
  --fpm-text-primary: #f0f4f8;
  --fpm-text-secondary: #6e7f8d;
  --fpm-text-muted: #3d4f5f;
  --text-inverse: #0a0e14;
  --fpm-text-inverse: #0a0e14;

  /* --- Accent (IronLink teal) --- */
  --fpm-accent: #48d1b0;
  --fpm-accent-dark: #2a9d7e;
  --fpm-accent-light: #5ddbb8;
  --fpm-accent-rgb: 72, 209, 176;
  --fpm-accent-dim: rgba(72, 209, 176, 0.15);
  --fpm-accent-glow: rgba(72, 209, 176, 0.06);
  --fpm-accent-secondary: #5ba3d9;
  --fpm-accent-secondary-rgb: 91, 163, 217;
  --fpm-accent-secondary-dim: rgba(91, 163, 217, 0.15);
  --fpm-accent-secondary-light: #5ba3d9;
  --fpm-accent-secondary-light-rgb: 91, 163, 217;
  --fpm-status-ok-light: #48d1b0;
  --fpm-status-ok-light-rgb: 72, 209, 176;

  /* --- Status --- */
  --fpm-status-ok: #48d1b0;
  --fpm-status-ok-rgb: 72, 209, 176;
  --fpm-status-ok-dim: rgba(72, 209, 176, 0.15);
  --fpm-status-ok-glow: rgba(72, 209, 176, 0.4);
  --fpm-status-warn: #f0b429;
  --fpm-status-warn-rgb: 240, 180, 41;
  --fpm-status-warn-dim: rgba(240, 180, 41, 0.15);
  --fpm-status-error: #f25f5c;
  --fpm-status-error-rgb: 242, 95, 92;
  --fpm-status-error-dim: rgba(242, 95, 92, 0.15);
  --fpm-status-inactive: #3d4f5f;
  --fpm-status-inactive-rgb: 61, 79, 95;
  --fpm-status-inactive-dim: rgba(61, 79, 95, 0.15);
  --fpm-status-purple: #c49cde;
  --fpm-status-pink: #ec4899;

  /* --- Overlay --- */
  --fpm-overlay-bg: rgba(0, 0, 0, 0.6);

  /* --- Portal: Depth Layers (solid colors for web pages) --- */
  --fpm-L0: #0a0e14;
  --fpm-L1: #141c28;
  --fpm-L2: #1c2736;
  --fpm-L3: #243040;

  /* --- Portal: Sidebar — graphite gradient + teal halo (locked 2026-04-17) --- */
  --fpm-sidebar:
    radial-gradient(ellipse 70% 35% at 50% 8%, rgba(72,209,176,0.09), transparent 65%),
    linear-gradient(180deg, #1a2434 0%, #131b28 45%, #0c121c 100%);
  /* Sidebar text/divider tokens — these flip in light mode below so the
     left rail can use a single source of truth instead of hard-coding
     rgba(255,255,255,…) everywhere.
     Note: dark-mode opacities are calibrated for white-on-navy. The light-mode
     overrides are NOT just the same numbers in charcoal — equal perceived
     contrast requires higher opacity on the dark text against a light gradient
     than on the white text against a dark gradient. See the [data-theme="light"]
     block below. */
  --fpm-sidebar-text: rgba(255, 255, 255, 0.95);
  --fpm-sidebar-text-secondary: rgba(255, 255, 255, 0.55);
  --fpm-sidebar-text-muted: rgba(255, 255, 255, 0.75);
  --fpm-sidebar-text-dim: rgba(255, 255, 255, 0.42);
  --fpm-sidebar-text-dimmer: rgba(255, 255, 255, 0.35);
  --fpm-sidebar-divider: rgba(255, 255, 255, 0.08);
  --fpm-sidebar-hover-bg: rgba(255, 255, 255, 0.06);
  --fpm-sidebar-overlay: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 50%, rgba(0,0,0,0.08) 100%);

  /* --- Portal: Border Accent --- */
  --fpm-border-accent: rgba(72, 209, 176, 0.25);

  /* --- Portal: Text Body (between primary and secondary) --- */
  --fpm-text-body: #c9d1d9;

  /* --- Portal: Status Glows --- */
  --fpm-glow-accent: 0 0 0 3px rgba(72, 209, 176, 0.2);
  --fpm-glow-blue: 0 0 0 3px rgba(91, 163, 217, 0.2);
  --fpm-glow-amber: 0 0 0 3px rgba(240, 180, 41, 0.2);
  --fpm-glow-red: 0 0 0 3px rgba(242, 95, 92, 0.2);
  --fpm-glow-purple: 0 0 0 3px rgba(196, 156, 222, 0.2);

  /* --- Portal: Typography Scale --- */
  --fpm-font-page-title: 22px;
  --fpm-font-stat-value: 34px;
  --fpm-font-gauge-value: 22px;
  --fpm-font-card-title: 14px;
  --fpm-font-body: 13px;
  --fpm-font-body-sm: 12px;
  --fpm-font-label: 10px;
  --fpm-font-label-sm: 9px;
  --fpm-font-meta: 10px;
  --fpm-font-badge: 9px;
  /* Canonical rem-scale aliases — mirror legacy --text-* values exactly so
     sweeping var(--text-sm) → var(--fpm-font-sm) is value-neutral. */
  --fpm-font-sm:   0.875rem;
  --fpm-font-base: 1rem;
  --fpm-font-lg:   1.125rem;
  --fpm-font-xl:   1.25rem;
  --fpm-font-2xl:  1.5rem;
  --fpm-font-3xl:  1.875rem;

  /* --- Portal: Font Weights --- */
  --fpm-weight-black: 900;
  --fpm-weight-bold: 800;
  --fpm-weight-semibold: 700;
  --fpm-weight-medium: 600;
  --fpm-weight-normal: 500;
  --fpm-weight-light: 400;

  /* --- Portal: Radius (squared tux geometry) --- */
  --fpm-radius-xs: 3px;
  --fpm-radius-sm: 4px;
  --fpm-radius-md: 6px;
  --fpm-radius-lg: 8px;
  --fpm-radius-window: 4px;

  /* --- Portal: Transitions (legacy aliases — point to canonical motion tokens
     so existing consumers inherit the unified curve. Add new code uses
     --fpm-dur-* + --fpm-ease-* directly.) --- */
  --fpm-transition-fast: var(--fpm-dur-micro) var(--fpm-ease-standard);
  --fpm-transition-normal: var(--fpm-dur-quick) var(--fpm-ease-standard);

  /* --- Portal: Extra Status Colors --- */
  --fpm-blue: #5ba3d9;
  --fpm-blue-dim: rgba(91, 163, 217, 0.15);
  --fpm-amber: #f0b429;
  --fpm-amber-dim: rgba(240, 180, 41, 0.15);
  --fpm-red: #f25f5c;
  --fpm-red-dim: rgba(242, 95, 92, 0.15);
  --fpm-purple: #c49cde;
  --fpm-purple-dim: rgba(196, 156, 222, 0.15);

  /* --- Portal Surfaces (alias to depth layers for theme responsiveness) --- */
  --fpm-surface-solid-2: var(--fpm-L2);
  --fpm-surface-solid-3: var(--fpm-L3);

  /* --- Typography (extra sizes not covered above) --- */
  --fpm-font-badge-sm: 8px;

  /* --- Shadows --- */
  --fpm-shadow-window: 0 8px 32px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
  --fpm-shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.4);

  /* --- Transitions (legacy slow alias — re-pointed to canonical motion tokens) --- */
  --fpm-transition-slow: var(--fpm-dur-slow) var(--fpm-ease-standard);

  /* --- Button --- */
  --fpm-btn-primary-bg: var(--fpm-accent);

  /* --- Extended (canvas form overlay, danger states, etc.) --- */
  --accent-purple: #c49cde;
  --accent-purple-rgb: 196, 156, 222;
  --fpm-bg-inset: rgba(0, 0, 0, 0.15);
  --surface-level-2: #1c2736;
  --canvas-dropdown-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --fpm-bg-danger: rgba(242, 95, 92, 0.15);
  --fpm-text-on-danger: #f25f5c;

  /* --- Surface (missing from extended block) --- */
  --fpm-bg-surface-accent: rgba(72, 209, 176, 0.03);

  /* --- Text (canonical + legacy alias) --- */
  --fpm-text-dim: rgba(255, 255, 255, 0.16);

  /* --- Card (dark defaults; light overrides below) --- */
  --fpm-card-bg: #1c2736;
  --fpm-card-border: rgba(255, 255, 255, 0.08);
  --fpm-card-border-hover: rgba(255, 255, 255, 0.13);
  --fpm-card-border-selected: rgba(72, 209, 176, 0.35);

  /* --- Drawer --- */
  --fpm-drawer-bg: rgba(0, 0, 0, 0.25);
  --fpm-drawer-border: rgba(255, 255, 255, 0.06);

  /* --- Glass gradients --- */
  --gradient-glass-dark: linear-gradient(180deg, #1c2736, #141c28);
  --gradient-glass-hover: linear-gradient(145deg, #243040, #1c2736);

  /* --- List / tree panel --- */
  --fpm-list-bg: linear-gradient(145deg, #1c2736, #141c28);
  --fpm-list-border: rgba(255, 255, 255, 0.1);
  --fpm-list-header-bg: rgba(0, 0, 0, 0.2);
  --fpm-list-divider: rgba(255, 255, 255, 0.1);
  --fpm-list-item-hover: rgba(255, 255, 255, 0.03);
  --fpm-list-item-hover-active: rgba(255, 255, 255, 0.05);
  --fpm-list-item-selected: rgba(72, 209, 176, 0.1);

  /* --- Toggle --- */
  --fpm-toggle-bg-on: #48d1b0;
  --fpm-toggle-bg-off: rgba(255, 255, 255, 0.1);
  --fpm-toggle-border: rgba(255, 255, 255, 0.15);
  --fpm-toggle-knob: #ffffff;

  /* --- Module identity colors --- */
  --fpm-module-storage: #5ba3d9;
  --fpm-module-vms: #c49cde;
  --fpm-module-network: #48d1b0;

  /* --- Canvas surfaces --- */
  --fpm-surface-1: rgba(255, 255, 255, 0.035);
  --fpm-surface-2: rgba(255, 255, 255, 0.055);
  --fpm-surface-3: rgba(255, 255, 255, 0.075);
  --fpm-canvas-grid-pattern: dots;
  --fpm-canvas-grid-color: rgba(72, 209, 176, 0.03);

  /* --- Window / chrome --- */
  --fpm-window-header-bg: #141c28;
  --window-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
  --window-shadow-inset: 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  --window-radius: 4px;
  --window-min-width: 400px;
  --window-min-height: 300px;
  --window-max-width: none;
  --window-max-height: none;

  /* --- Window control buttons --- */
  --btn-minimize: #999999;
  --btn-maximize: #999999;
  --btn-close: #999999;
  --btn-close-hover: #e81123;
  --btn-close-hover-icon: #ffffff;
  --btn-pin: #c49cde;
  --btn-pin-active: #8e44ad;
  --btn-control-icon: rgba(255, 255, 255, 0.7);
  --pin-glow: rgba(196, 156, 222, 0.5);
  --pin-header-tint: rgba(196, 156, 222, 0.1);

  /* --- Taskbar --- */
  --taskbar-shimmer: transparent;

  /* --- Wallpaper / background atmosphere --- */
  --wallpaper-glow-primary: rgba(72, 209, 176, 0.05);
  --wallpaper-glow-accent: rgba(72, 209, 176, 0.03);
  --wallpaper-dark-1: #0a0e14;
  --wallpaper-dark-2: #141c28;
  --grid-line-color: rgba(72, 209, 176, 0.03);

  /* --- Stars (wallpaper decoration) --- */
  --star-white: rgba(255, 255, 255, 0.5);
  --star-white-dim: rgba(255, 255, 255, 0.3);
  --star-cyan: rgba(72, 209, 176, 0.5);
  --star-blue: rgba(91, 163, 217, 0.4);

  /* --- Brand --- */
  --brand-gradient: linear-gradient(135deg, #ffffff 0%, #48d1b0 100%);
  --brand-glow: rgba(72, 209, 176, 0.08);
  --brand-line-start: rgba(72, 209, 176, 0.6);
  --brand-line-end: rgba(72, 209, 176, 0.8);
  --brand-purple-glow: rgba(196, 156, 222, 0.1);

  /* --- Icon glow --- */
  --icon-glow-color: rgba(72, 209, 176, 0.1);
  --icon-glow-bright: rgba(72, 209, 176, 0.2);
  --icon-label-shadow: rgba(0, 0, 0, 0.5);

  /* --- Transfer progress --- */
  --transfer-bg: rgba(72, 209, 176, 0.1);
  --transfer-border: rgba(72, 209, 176, 0.25);
  --transfer-shadow: rgba(72, 209, 176, 0.15);
  --transfer-glow: rgba(72, 209, 176, 0.6);
  --transfer-glow-dim: rgba(72, 209, 176, 0.4);
  --transfer-glow-bright: rgba(72, 209, 176, 0.8);
  --transfer-bar-shadow: 0 0 10px rgba(72, 209, 176, 0.5), 0 0 20px rgba(72, 209, 176, 0.3);
  --transfer-blue-light: #5ba3d9;
  --transfer-complete-green: #48d1b0;
  --transfer-complete-shadow: 0 0 10px rgba(72, 209, 176, 0.5), 0 0 20px rgba(72, 209, 176, 0.3);
  --transfer-progress-bg: rgba(255, 255, 255, 0.08);
  --transfer-cancel-bg: rgba(255, 255, 255, 0.05);
  --transfer-cancel-border: rgba(255, 255, 255, 0.1);
  --transfer-cancel-hover-bg: rgba(242, 95, 92, 0.2);
  --transfer-cancel-hover-border: rgba(242, 95, 92, 0.4);

  /* --- Form inputs --- */
  --form-input-bg: rgba(255, 255, 255, 0.03);
  --form-input-hover-bg: rgba(255, 255, 255, 0.04);
  --form-input-hover-border: rgba(72, 209, 176, 0.3);
  --form-input-focus-bg: rgba(72, 209, 176, 0.05);
  --form-input-focus-shadow: rgba(72, 209, 176, 0.1);
  --form-option-hover: rgba(72, 209, 176, 0.2);

  /* --- Context menu --- */
  --context-menu-shadow: rgba(0, 0, 0, 0.5);
  --context-item-hover: rgba(72, 209, 176, 0.1);

  /* --- Scrollbars --- */
  --scrollbar-thumb: rgba(255, 255, 255, 0.1);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.2);
  --canvas-scrollbar-thumb: rgba(255, 255, 255, 0.08);
  --canvas-scrollbar-thumb-hover: rgba(255, 255, 255, 0.12);

  /* --- Canvas tooltip/overlay --- */
  --canvas-tooltip-bg: rgba(10, 14, 20, 0.95);
  --canvas-overlay-bg: rgba(0, 0, 0, 0.7);

  /* --- Extra accent aliases (pre-Phase-1 holdouts) --- */
  --accent-pink: #f472b6;
  --accent-pink-rgb: 244, 114, 182;
  --accent-indigo: #5ba3d9;
  --accent-indigo-rgb: 91, 163, 217;

  /* --- Animation --- */
  --anim-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Glass blur (zero by default — enable per-module) --- */
  --fpm-blur: 0px;

  /* --- UI sizing (canvas desktop chrome) --- */
  --ui-tab-height: 36px;
  --ui-tab-font-size: 13px;
  --ui-tab-padding: 0.5rem 1.5rem;
  --ui-icon-size: 48px;
  --ui-icon-font-size: 24px;
  --ui-icon-label-size: 11px;
  --ui-icon-container: 150px;

  /* === Legacy tokens awaiting framework primitives ================
     These were FpmTheme._defaultColors-only tokens (not in base.css
     before this migration). They remain here as candidates for
     primitive replacement in a future wave. ======================= */

  /* Tab chrome (canvas window tabs) */
  --tab-bg: linear-gradient(180deg, #1c2736, #141c28);
  --tab-border: rgba(255, 255, 255, 0.08);
  --tab-hover-bg: linear-gradient(180deg, #243040, #1c2736);
  --tab-active-bg: linear-gradient(180deg, #0a0e14, #0a0e14);
  --tab-active-border: rgba(255, 255, 255, 0.1);

  /* Module colors (dashboard module accent palette) */
  --module-color-storage: #5ba3d9;
  --module-color-storage-rgb: 91, 163, 217;
  --module-color-vms: #c49cde;
  --module-color-vms-rgb: 196, 156, 222;
  --module-color-network: #48d1b0;
  --module-color-network-rgb: 72, 209, 176;
  --module-color-node-mgmt: #48d1b0;
  --module-color-node-mgmt-rgb: 72, 209, 176;
  --module-color-software: #c49cde;
  --module-color-software-rgb: 196, 156, 222;
  --module-color-users: #f0b429;
  --module-color-users-rgb: 240, 180, 41;

  /* Chart lines (canvas network sparklines) */
  --fpm-chart-rx-line: #48d1b0;
  --fpm-chart-rx-fill-start: rgba(72, 209, 176, 0.25);
  --fpm-chart-rx-fill-end: rgba(72, 209, 176, 0.0);
  --fpm-chart-tx-line: #5ba3d9;
  --fpm-chart-tx-fill-start: rgba(91, 163, 217, 0.2);
  --fpm-chart-tx-fill-end: rgba(91, 163, 217, 0.0);
  --fpm-chart-grid: rgba(255, 255, 255, 0.10);
  --fpm-chart-grid-text: #5a6f81;

  /* === New tokens (Wave 6) === */
  --fpm-storage-ssd: #c084fc;
  --fpm-terminal-bg: #1a1b26;

  /* --- Chart --- */
  --fpm-chart-meta-bg: rgba(255, 255, 255, 0.015);
  --fpm-chart-grid-line: rgba(255, 255, 255, 0.08);
  --fpm-chart-rx-border: rgba(72, 209, 176, 0.4);
  --fpm-chart-tx-border: rgba(91, 163, 217, 0.35);

  /* --- Card — raised surface depth language (locked 2026-04-17 from elegance mockups) ---
     5-stack matches the showcase contract (showcase-mockup.html:107-112). */
  --fpm-card-radius: 6px;
  --fpm-card-film: linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0) 45%);
  --fpm-card-shadow:
    inset 0 1px 0 rgba(255,255,255,0.055),
    inset 0 0 0 1px rgba(255,255,255,0.015),
    0 0 0 1px rgba(0,0,0,0.45),
    0 3px 10px -2px rgba(0,0,0,0.4),
    0 12px 28px -6px rgba(0,0,0,0.5);
  --fpm-card-shadow-hover:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 0 0 1px rgba(0,0,0,0.5),
    0 4px 14px -2px rgba(0,0,0,0.45),
    0 18px 36px -6px rgba(0,0,0,0.55);
  --fpm-shadow-sidebar:
    inset 1px 0 0 rgba(255,255,255,0.04),
    inset 0 1px 0 rgba(255,255,255,0.05),
    6px 0 18px -2px rgba(0,0,0,0.45),
    12px 0 40px -8px rgba(0,0,0,0.5);
  --fpm-shadow-rail:
    inset -1px 0 0 rgba(255,255,255,0.04),
    inset 0 1px 0 rgba(255,255,255,0.05),
    -6px 0 18px -2px rgba(0,0,0,0.45),
    -12px 0 40px -8px rgba(0,0,0,0.5);
  /* Right utility rail gradient — slightly cooler than the sidebar so
     the two raised surfaces are distinguishable at a glance. */
  --fpm-rail-bg:
    radial-gradient(ellipse 80% 25% at 50% 6%, rgba(72,209,176,0.06), transparent 70%),
    linear-gradient(180deg, #141a24 0%, #10151d 55%, #0c111a 100%);
  /* Text color over the teal accent surface (avatars, accent buttons, accent
     pill chips). Stays dark in both themes since the accent itself is
     similar luminosity in both. */
  --fpm-on-accent: #0b0e14;
  --fpm-shadow-detail: 0 1px 4px rgba(0, 0, 0, 0.12);
  --fpm-shadow-topbar: 0 2px 8px rgba(0, 0, 0, 0.2);

  /* --- Motion tokens — single curve language (locked 2026-04-17 from elegance mockups) --- */
  --fpm-ease-standard: cubic-bezier(0.32, 0.72, 0, 1);    /* Linear's curve, default for UI */
  --fpm-ease-spring:   cubic-bezier(0.5, 1.25, 0.75, 1.25);  /* toggles, modals, playful */
  --fpm-ease-exit:     cubic-bezier(0.4, 0, 1, 1);         /* leaves fast */
  --fpm-dur-micro:      120ms;  /* color shifts, tiny tint bumps */
  --fpm-dur-quick:      180ms;  /* focus rings, hover, tooltips */
  --fpm-dur-normal:     240ms;  /* dropdowns, sheet slides, card hover */
  --fpm-dur-slow:       320ms;  /* dialog open, page transitions */
  --fpm-dur-deliberate: 480ms;  /* entrance staggers, bar fills */

  /* --- Login atmosphere tokens (locked 2026-04-17) --- */
  --fpm-orb-accent: rgba(72, 209, 176, 0.35);
  --fpm-orb-steel:  rgba(91, 113, 145, 0.30);
  --fpm-vignette:   radial-gradient(ellipse 70% 70% at 50% 50%, transparent 30%, rgba(0,0,0,0.45) 100%);
  --fpm-glass-bg:   rgba(18, 24, 31, 0.70);
  --fpm-glass-border: rgba(255, 255, 255, 0.06);
  --fpm-glass-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 1px rgba(0,0,0,0.35),
    0 24px 48px -16px rgba(0,0,0,0.55),
    0 60px 120px -40px rgba(0,0,0,0.5);

  /* --- Card inner elevation (nested cards inside cards) --- */
  --fpm-card-shadow-inner:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 1px 3px rgba(0,0,0,0.35);

  /* --- Body backdrop wash (large diffuse accent gradients behind chrome) --- */
  --fpm-body-wash:
    radial-gradient(ellipse 60% 40% at 80% -10%, rgba(72,209,176,0.05), transparent 60%),
    radial-gradient(ellipse 60% 40% at 10% 5%, rgba(91,163,217,0.04), transparent 60%);

  /* --- Heatmap state colours (per-cell scan-grid states) --- */
  --fpm-heat-empty:   rgba(255, 255, 255, 0.025);
  --fpm-heat-queued:  rgba(255, 255, 255, 0.04);
  --fpm-heat-probed:  rgba(91, 163, 217, 0.28);
  --fpm-heat-found:   #48d1b0;
  --fpm-heat-dropped: #f25f5c;
  --fpm-heat-active:  #48d1b0;

  /* --- Canonical font family names --- */
  --fpm-font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --fpm-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* --- Shell column widths (nav + right rail) --- */
  --fpm-nav-w: 260px;
  --fpm-rail-w: 320px;

  /* --- Z-index scale (floating layer ordering) --- */
  --fpm-z-sticky: 5;
  --fpm-z-tooltip: 1100;
  --fpm-z-dropdown: 1200;
  --fpm-z-popover: 1300;
  --fpm-z-drawer: 1400;
  --fpm-z-modal-backdrop: 1500;
  --fpm-z-modal: 1600;
  --fpm-z-modal-stacked: 1700;
  --fpm-z-topmost: 9999;

  /* --- Motion: extended duration + easing scale (D5 motion system) --- */
  --fpm-dur-base:      250ms;  /* highest-frequency default (per motion audit) */
  --fpm-dur-emphasis:  500ms;  /* deliberate, eye-catching transitions */
  --fpm-ease-emphasized: cubic-bezier(0.4, 0, 0.2, 1);  /* Material standard */
  --fpm-ease-out:        cubic-bezier(0, 0, 0.55, 1);    /* decelerate */

  /* --- Floating-layer shadows (tooltip / popover / modal) --- */
  --fpm-shadow-floating: 0 4px 12px rgba(0, 0, 0, 0.4);
  --fpm-shadow-popover:
    0 6px 18px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  --fpm-shadow-modal:
    0 24px 48px -16px rgba(0, 0, 0, 0.55),
    0 60px 120px -40px rgba(0, 0, 0, 0.5);

  /* --- Focus-ring shadows (a11y outlines via box-shadow) --- */
  --fpm-shadow-focus-ring:  0 0 0 2px var(--fpm-accent-dim);
  --fpm-shadow-focus-ok:    0 0 0 2px rgba(var(--fpm-status-ok-rgb), 0.30);
  --fpm-shadow-focus-warn:  0 0 0 2px rgba(var(--fpm-status-warn-rgb), 0.30);
  --fpm-shadow-focus-error: 0 0 0 2px rgba(var(--fpm-status-error-rgb), 0.30);

  /* --- Diffused status glows (separate from the 3-px ring halos above) --- */
  --fpm-glow-ok:     0 0 12px rgba(var(--fpm-status-ok-rgb), 0.55);
  --fpm-glow-warn:   0 0 12px rgba(var(--fpm-status-warn-rgb), 0.55);
  --fpm-glow-error:  0 0 12px rgba(var(--fpm-status-error-rgb), 0.55);
  --fpm-glow-purple-soft: 0 0 12px rgba(196, 156, 222, 0.55);

  /* --- Accent purple (canonical name; --accent-purple kept below as alias) --- */
  --fpm-accent-purple: #c49cde;
  --fpm-accent-purple-rgb: 196, 156, 222;
  --fpm-accent-purple-dim: rgba(196, 156, 222, 0.15);

  /* --- Success (bright green for save/confirm actions, green-400) --- */
  --fpm-success: #4ade80;
  --fpm-success-rgb: 74, 222, 128;
  --fpm-success-hover: #22c55e;

  /* --- Text dark (dark text for use on bright/light bg, e.g. success buttons) --- */
  --fpm-text-dark: #0a0a0a;

  /* --- Accent orange (iOS/SF orange, used for size columns) --- */
  --fpm-accent-orange: #ff9500;
  --fpm-accent-orange-rgb: 255, 149, 0;

  /* --- Accent cyan (used for label columns, cyan-400) --- */
  --fpm-accent-cyan: #22d3ee;
  --fpm-accent-cyan-rgb: 34, 211, 238;

  /* --- Status error dark (darker red for hover states) --- */
  --fpm-status-error-dark: #dc2626;
  --fpm-status-error-dark-rgb: 220, 38, 38;

  /* --- Status error light (coral hover, lighter than error) --- */
  --fpm-status-error-light: #ff6b60;
  --fpm-status-error-light-rgb: 255, 107, 96;

  /* --- Text on solid saturated backgrounds (danger, warning, success buttons) --- */
  /* Fixed white regardless of theme — saturated bg provides contrast. */
  --fpm-text-on-solid: #ffffff;

  /* --- Canonical spacing scale (legacy --space-* kept below in foundation block) --- */
  --fpm-space-xs:  4px;
  --fpm-space-sm:  8px;
  --fpm-space-md:  12px;
  --fpm-space-lg:  16px;
  --fpm-space-xl:  24px;
  --fpm-space-2xl: 32px;

  /* === V2 DESIGN SYSTEM ALIASES === */
  /* Short-form aliases for showcase compatibility - map to FPM tokens */
  --bg-surface: var(--fpm-bg-surface);
  --bg-deep: var(--fpm-bg-deep);
  --bg-base: var(--fpm-bg-base);
  --accent: var(--fpm-accent);
  --accent-rgb: var(--fpm-accent-rgb);
  --accent-secondary: var(--fpm-accent-secondary);
  --accent-secondary-rgb: var(--fpm-accent-secondary-rgb);
  --border-subtle: var(--fpm-border-subtle);
  --border-light: var(--fpm-border-light);
  --border-medium: var(--fpm-border-medium);
  --divider: var(--fpm-divider);
  --divider-strong: var(--fpm-divider-strong);
  --row-hover: var(--fpm-row-hover);
  --status-ok: var(--fpm-status-ok);
  --status-ok-dim: var(--fpm-status-ok-dim);
  --status-warn: var(--fpm-status-warn);
  --status-warn-dim: var(--fpm-status-warn-dim);
  --status-error: var(--fpm-status-error);
  --status-error-dim: var(--fpm-status-error-dim);
  --status-inactive: var(--fpm-status-inactive);
  --status-inactive-dim: rgba(85, 93, 110, 0.12);
  --card-radius: var(--fpm-card-radius);
  --card-shadow: var(--fpm-card-shadow);
  --card-shadow-hover: var(--fpm-card-shadow-hover);
  --chart-meta-bg: var(--fpm-chart-meta-bg);
  --chart-grid-line: var(--fpm-chart-grid-line);
  --chart-rx-border: var(--fpm-chart-rx-border);
  --chart-tx-border: var(--fpm-chart-tx-border);

  /* === Real tokens that didn't fit the foundation block (no aliasing) ======
     The 41 invented "alias" names that used to live here have been swept
     out — every consumer was migrated to the canonical name (--text-* /
     --fpm-L1/2/3 / --fpm-status-ok|warn|error / --fpm-accent-secondary
     etc.). What remains below is genuinely new tokens (font-size scale
     gaps and the window / taskbar chrome tokens consumed by enhanced.css
     and enhancedTaskbar.css), kept here because they're the only place
     they're defined. */

  /* Font-size scale gaps the typography block didn't cover. */
  --fpm-font-h3:      18px;
  --fpm-font-h4:      15px;
  --fpm-font-body-lg: 15px;

  /* Tooltip-position vars — runtime-computed by the JS that owns the
     tooltip. Falling through to 0 keeps SSR and first-paint sane. */
  --fpm-tooltip-x: 0px;
  --fpm-tooltip-y: 0px;

  /* Window / taskbar chrome tokens consumed by enhanced.css and
     enhancedTaskbar.css. Real values, not aliases. */
  --fpm-window-header:           var(--fpm-bg-surface-raised);
  --fpm-window-nav-bg:           var(--fpm-bg-surface-raised);
  --fpm-window-nav-hover:        var(--fpm-bg-surface-hover);
  --fpm-window-nav-active-bg:    var(--fpm-accent-dim);
  --fpm-window-nav-active-border: var(--fpm-accent);
  --fpm-taskbar-bg:              var(--fpm-bg-deep);
  --fpm-taskbar-app-bg:          var(--fpm-bg-surface);
  --fpm-taskbar-app-hover-bg:    var(--fpm-bg-surface-hover);
  --fpm-taskbar-app-hover-border: var(--fpm-border-medium);
  --fpm-taskbar-app-active-bg:   var(--fpm-accent-dim);

  /* === FOUNDATION (spacing, type, radius, animation) === */

  /* === PASS-2 UNIFY TOKENS (2026-04-29 — rhythm + density consistency) ======
     The W11–W14 feature work each picked its own rem/px values for filter-bar
     padding, list-row padding, search-input padding, etc. The page-by-page
     drift was visible side-by-side (Tickets felt heavier than Scripts; Scripts
     felt denser than Devices). These tokens collapse the drift to a single
     vocabulary every page consumes.

     Reference rhythm: device-detail page (8px filter gap, 14–16px card-head
     padding, 24px outer margin between hero and content). Pages that used
     ad-hoc 10px/12px/16px values now point at these names.

     Cross-cutting rule: add new tokens here, not in feature CSS files. */

  /* Filter bar — horizontal strip with pills + search. */
  --fpm-filter-pad-y: 10px;
  --fpm-filter-pad-x: 12px;
  --fpm-filter-gap:   8px;
  --fpm-filter-mb:    12px;

  /* Filter pill — single chip inside a filter group. */
  --fpm-pill-pad-y:   5px;
  --fpm-pill-pad-x:   10px;
  --fpm-pill-radius:  4px;
  --fpm-pill-fs:      12px;

  /* List/table row — vertical density inside cards. */
  --fpm-row-pad-y:    8px;
  --fpm-row-pad-x:    10px;

  /* Card head — title strip on top of every list/detail card. */
  --fpm-card-head-pad-y: 14px;
  --fpm-card-head-pad-x: 18px;

  /* Page header rhythm — distance from hero to first content row. */
  --fpm-hero-mb:      var(--fpm-space-lg);

  /* Form-control density — single source of truth for search inputs and
     selects in filter bars. */
  --fpm-input-pad-y:  6px;
  --fpm-input-pad-x:  10px;
  --fpm-input-fs:     13px;
  --fpm-input-radius: 4px;
  /* ============================================================ */

  /* Typography */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;

  /* Borders & Radius */
  --radius-window: 4px;
  --fpm-border-medium-light: rgba(255, 255, 255, 0.10);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;

  /* Additional Colors (used) */
  --gray: #6b7280;
  --purple-rgb: 147, 51, 234;

  /* === OPEN PROPS INTEGRATION === */

  /* Easing functions */
  --ease-smooth: var(--ease-out-3);
  --ease-bounce: var(--ease-out-4);
  --ease-snap: var(--ease-out-5);

  /* Shadow tokens */
  --shadow-card: var(--shadow-3);
  --shadow-elevated: var(--shadow-5);
  --shadow-modal: var(--shadow-6);
  --shadow-dropdown: var(--shadow-4);

}

/* ── Light Theme Override ──────────────────────────────────── */
[data-theme="light"] {
  /* Showcase contract (locked): page body is deeper warm grey so white data
     cards punch off it. "Stage dim, actors lit." */
  --fpm-bg-deep: #b8bec6;
  --fpm-bg-base: #f5f7fa;
  --fpm-bg-surface: rgba(20, 25, 32, 0.06);
  --fpm-bg-surface-hover: rgba(20, 25, 32, 0.08);
  --fpm-bg-surface-raised: rgba(255, 255, 255, 0.9);
  --fpm-bg-surface-accent: rgba(15, 122, 95, 0.05);
  --fpm-bg-plot: rgba(20, 25, 32, 0.04);
  --fpm-border-subtle: rgba(20, 25, 32, 0.025);
  --fpm-border-light: rgba(20, 25, 32, 0.045);
  --fpm-border-medium: rgba(20, 25, 32, 0.07);
  --fpm-border-medium-light: rgba(20, 25, 32, 0.08);
  --fpm-border-strong: rgba(20, 25, 32, 0.13);
  --fpm-border-accent: rgba(15, 122, 95, 0.24);
  --fpm-divider: rgba(20, 25, 32, 0.03);
  --fpm-divider-strong: rgba(20, 25, 32, 0.05);
  --fpm-row-hover: rgba(15, 122, 95, 0.10);
  --fpm-row-alt: rgba(20, 25, 32, 0.022);
  /* Canonical text tokens (showcase values — crisper readability on white). */
  --fpm-text-primary: #0f1620;
  --fpm-text-secondary: #5a6470;
  --fpm-text-muted: #7a8290;
  --text-inverse: #f0f4f8;
  --fpm-text-inverse: #f0f4f8;
  /* Deeper teal — neon dark-mode value reads cheap on white. */
  --fpm-accent: #0f7a5f;
  --fpm-accent-dark: #1e7a62;
  --fpm-accent-light: #48d1b0;
  --fpm-accent-rgb: 15, 122, 95;
  --fpm-accent-secondary-light: #2874a6;
  --fpm-accent-secondary-light-rgb: 40, 116, 166;
  --fpm-status-ok-light: #2a9d7e;
  --fpm-status-ok-light-rgb: 42, 157, 126;
  --fpm-accent-dim: rgba(15, 122, 95, 0.10);
  --fpm-accent-glow: rgba(15, 122, 95, 0.20);
  --fpm-accent-secondary: #2a6db3;
  --fpm-accent-secondary-rgb: 42, 109, 179;
  --fpm-accent-secondary-dim: rgba(42, 109, 179, 0.10);
  --fpm-status-ok: #0f7a5f;
  --fpm-status-ok-rgb: 15, 122, 95;
  --fpm-status-ok-dim: rgba(15, 122, 95, 0.10);
  --fpm-status-ok-glow: rgba(15, 122, 95, 0.30);
  --fpm-status-warn: #946007;
  --fpm-status-warn-rgb: 148, 96, 7;
  --fpm-status-warn-dim: rgba(148, 96, 7, 0.10);
  --fpm-status-error: #b53030;
  --fpm-status-error-rgb: 181, 48, 48;
  --fpm-status-error-dim: rgba(181, 48, 48, 0.10);
  --fpm-status-inactive: #7a8290;
  --fpm-status-inactive-rgb: 122, 130, 144;
  --fpm-status-inactive-dim: rgba(122, 130, 144, 0.15);
  --fpm-status-purple: #7c4cb0;
  /* Heatmap — empty is paper, queued holds a hint of ink, probed is low-sat
     blue, found is the deeper teal, active is a brighter teal pulse. */
  --fpm-heat-empty:   rgba(20, 25, 32, 0.04);
  --fpm-heat-queued:  rgba(20, 25, 32, 0.07);
  --fpm-heat-probed:  rgba(42, 109, 179, 0.28);
  --fpm-heat-found:   #0f7a5f;
  --fpm-heat-dropped: #b53030;
  --fpm-heat-active:  #1ea784;
  --fpm-body-wash:
    radial-gradient(ellipse 60% 40% at 80% -10%, rgba(15,122,95,0.04), transparent 60%),
    radial-gradient(ellipse 60% 40% at 10% 5%, rgba(42,109,179,0.03), transparent 60%);
  --fpm-card-film: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 60%);
  /* Showcase 4-stack: crisp ring, tight close shadow, mid diffuse, big drop. */
  --fpm-card-shadow:
    0 0 0 1px rgba(20, 25, 32, 0.06),
    0 1px 3px rgba(20, 25, 32, 0.08),
    0 8px 16px rgba(20, 25, 32, 0.10),
    0 24px 48px rgba(20, 25, 32, 0.12);
  --fpm-card-shadow-hover:
    0 0 0 1px rgba(20, 25, 32, 0.08),
    0 2px 5px rgba(20, 25, 32, 0.10),
    0 12px 24px rgba(20, 25, 32, 0.14),
    0 32px 64px rgba(20, 25, 32, 0.16);
  --fpm-card-shadow-inner:
    0 1px 2px rgba(20, 25, 32, 0.05),
    0 3px 8px rgba(20, 25, 32, 0.07);
  --fpm-shadow-sidebar:
    inset 1px 0 0 rgba(255,255,255,0.05),
    inset 0 1px 0 rgba(255,255,255,0.06),
    6px 0 18px -2px rgba(15,22,40,0.14),
    12px 0 40px -8px rgba(15,22,40,0.18);
  --fpm-shadow-rail:
    inset -1px 0 0 rgba(255,255,255,1),
    inset 0 1px 0 rgba(15,22,40,0.04),
    -6px 0 18px -2px rgba(15,22,40,0.12),
    -12px 0 40px -8px rgba(15,22,40,0.16);
  --fpm-rail-bg: #ffffff;
  /* --fpm-on-accent stays the same dark value in both themes —
     teal accent has equal luminosity across light/dark, so contrast text
     does not flip. Intentionally not redeclared here. */
  /* Login atmosphere — light variant: paler orbs, soft-white glass, lighter vignette */
  --fpm-orb-accent: rgba(42, 157, 126, 0.25);
  --fpm-orb-steel:  rgba(91, 113, 145, 0.18);
  --fpm-vignette:   radial-gradient(ellipse 70% 70% at 50% 50%, transparent 30%, rgba(20, 28, 42, 0.18) 100%);
  --fpm-glass-bg:   rgba(255, 255, 255, 0.86);
  --fpm-glass-border: rgba(15, 22, 40, 0.08);
  --fpm-glass-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 0 0 1px rgba(15,22,40,0.08),
    0 24px 48px -16px rgba(15,22,40,0.20),
    0 60px 120px -40px rgba(15,22,40,0.18);
  --fpm-card-bg: #f7f8fa;
  --fpm-card-border: rgba(0, 0, 0, 0.06);
  /* Showcase contract: stage-dim / actors-lit. L0 is the deepest warm grey
     so white data cards punch off it; L1=card surface near-white, L2=pure
     white (most elevated), L3=rare nested-inside-card sections. */
  --fpm-L0: #b8bec6;
  --fpm-L1: #fafbfc;
  --fpm-L2: #ffffff;
  --fpm-L3: #f0f3f7;
  /* On-accent text flips to white in light mode — the deeper teal accent
     needs a light foreground for contrast (dark-mode kept its dark text). */
  --fpm-on-accent: #ffffff;
  /* Sidebar stays dark navy in light mode by user request — visually it
     reads as a fixed left rail regardless of page theme. We pin every
     --fpm-sidebar* token back to its dark-mode value here so the cascade
     can't accidentally drift. To re-enable a true light sidebar later,
     delete this whole block (the original light-mode values are in git
     history at commit 29da25a). */
  --fpm-sidebar:
    radial-gradient(ellipse 70% 35% at 50% 8%, rgba(72,209,176,0.09), transparent 65%),
    linear-gradient(180deg, #1a2434 0%, #131b28 45%, #0c121c 100%);
  --fpm-sidebar-text: rgba(255, 255, 255, 0.95);
  --fpm-sidebar-text-secondary: rgba(255, 255, 255, 0.55);
  --fpm-sidebar-text-muted: rgba(255, 255, 255, 0.75);
  --fpm-sidebar-text-dim: rgba(255, 255, 255, 0.42);
  --fpm-sidebar-text-dimmer: rgba(255, 255, 255, 0.35);
  --fpm-sidebar-divider: rgba(255, 255, 255, 0.08);
  --fpm-sidebar-hover-bg: rgba(255, 255, 255, 0.06);
  --fpm-sidebar-overlay: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 50%, rgba(0,0,0,0.08) 100%);
  /* Map marker halo flips to charcoal against light tiles. */
  --fpm-marker-halo: rgba(44, 62, 80, 0.85);
  --fpm-marker-shadow: rgba(0, 0, 0, 0.25);
  /* Showcase: crisper body text on white surfaces. */
  --fpm-text-body: #1a1f26;
  --fpm-blue: #2874a6;
  --fpm-blue-dim: rgba(40, 116, 166, 0.1);
  --fpm-amber: #c49000;
  --fpm-amber-dim: rgba(196, 144, 0, 0.1);
  --fpm-red: #c0392b;
  --fpm-red-dim: rgba(192, 57, 43, 0.1);
  --fpm-purple: #8e44ad;
  --fpm-purple-dim: rgba(142, 68, 173, 0.1);
  --fpm-glow-accent: 0 0 0 3px rgba(15, 122, 95, 0.2);
  --fpm-glow-blue: 0 0 0 3px rgba(40, 116, 166, 0.2);
  --fpm-glow-amber: 0 0 0 3px rgba(196, 144, 0, 0.2);
  --fpm-glow-red: 0 0 0 3px rgba(192, 57, 43, 0.2);
  --fpm-glow-purple: 0 0 0 3px rgba(124, 76, 176, 0.2);
  --fpm-glow-purple-soft: 0 0 12px rgba(124, 76, 176, 0.55);
  /* Floating-layer + focus-ring shadows tuned for light surfaces — the
     dark-mode rgba(0,0,0,...) values would crush against #ffffff cards. */
  --fpm-shadow-floating: 0 4px 12px rgba(20, 25, 32, 0.18);
  --fpm-shadow-popover:
    0 6px 18px rgba(20, 25, 32, 0.16),
    0 0 0 1px rgba(20, 25, 32, 0.08);
  --fpm-shadow-modal:
    0 24px 48px -16px rgba(20, 25, 32, 0.22),
    0 60px 120px -40px rgba(20, 25, 32, 0.18);
  /* Canonical accent-purple (showcase value); --accent-purple kept as alias. */
  --fpm-accent-purple: #7c4cb0;
  --fpm-accent-purple-rgb: 124, 76, 176;
  --fpm-accent-purple-dim: rgba(124, 76, 176, 0.15);
  --accent-purple: #7c4cb0;
  --accent-purple-rgb: 124, 76, 176;

  /* --- Surface (light overrides) --- */
  --fpm-bg-surface-accent: rgba(42, 157, 126, 0.05);
  --fpm-text-dim: rgba(0, 0, 0, 0.12);

  /* --- Card (light overrides — already partially set above) --- */
  --fpm-card-border-hover: rgba(0, 0, 0, 0.10);
  --fpm-card-border-selected: rgba(42, 157, 126, 0.35);

  /* --- Drawer (light) --- */
  --fpm-drawer-bg: rgba(255, 255, 255, 0.5);
  --fpm-drawer-border: rgba(0, 0, 0, 0.06);

  /* --- Glass gradients (light) --- */
  --gradient-glass-dark: linear-gradient(180deg, #f0f2f6, #e8eaef);
  --gradient-glass-hover: linear-gradient(145deg, #f7f8fa, #f0f2f6);

  /* --- List panel (light) --- */
  --fpm-list-bg: linear-gradient(145deg, #f7f8fa, #eceef2);
  --fpm-list-border: rgba(0, 0, 0, 0.08);
  --fpm-list-header-bg: rgba(0, 0, 0, 0.03);
  --fpm-list-divider: rgba(0, 0, 0, 0.06);
  --fpm-list-item-hover: rgba(0, 0, 0, 0.02);
  --fpm-list-item-hover-active: rgba(0, 0, 0, 0.04);
  --fpm-list-item-selected: rgba(42, 157, 126, 0.08);

  /* --- Toggle (light) --- */
  --fpm-toggle-bg-on: #2a9d7e;
  /* --fpm-toggle-bg-off, --fpm-toggle-border, --fpm-toggle-knob: same as dark */

  /* --- Module identity (light) --- */
  --fpm-module-storage: #2874a6;
  --fpm-module-vms: #8e44ad;
  --fpm-module-network: #2a9d7e;

  /* --- Canvas surfaces (light) --- */
  --fpm-surface-1: rgba(0, 0, 0, 0.02);
  --fpm-surface-2: rgba(0, 0, 0, 0.04);
  --fpm-surface-3: rgba(0, 0, 0, 0.06);
  --fpm-canvas-grid-color: rgba(0, 0, 0, 0.03);

  /* --- Window shadow (light) --- */
  --window-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.05);
  --window-shadow-inset: 0 0 0 1px rgba(0, 0, 0, 0.05) inset;

  /* --- Wallpaper / atmosphere (light) --- */
  --wallpaper-glow-primary: rgba(42, 157, 126, 0.04);
  --wallpaper-glow-accent: rgba(42, 157, 126, 0.03);
  --wallpaper-dark-1: #dce2ea;
  --wallpaper-dark-2: #d0d6e0;
  --grid-line-color: rgba(0, 0, 0, 0.03);

  /* --- Stars (light) --- */
  --star-white: rgba(0, 0, 0, 0.08);
  --star-white-dim: rgba(0, 0, 0, 0.04);
  --star-cyan: rgba(42, 157, 126, 0.15);
  --star-blue: rgba(40, 116, 166, 0.12);

  /* --- Brand (light) --- */
  --brand-gradient: linear-gradient(135deg, #2c3e50 0%, #2a9d7e 100%);
  --brand-glow: rgba(42, 157, 126, 0.08);
  --brand-line-start: rgba(42, 157, 126, 0.4);
  --brand-line-end: rgba(42, 157, 126, 0.6);
  /* --brand-purple-glow: same as dark */

  /* --- Icon glow (light) --- */
  --icon-glow-color: rgba(42, 157, 126, 0.08);
  --icon-glow-bright: rgba(42, 157, 126, 0.15);
  --icon-label-shadow: rgba(0, 0, 0, 0.15);

  /* --- Transfer (light) --- */
  --transfer-bg: rgba(42, 157, 126, 0.08);
  --transfer-border: rgba(42, 157, 126, 0.2);
  --transfer-glow: rgba(42, 157, 126, 0.4);
  --transfer-glow-dim: rgba(42, 157, 126, 0.2);
  --transfer-glow-bright: rgba(42, 157, 126, 0.6);
  --transfer-complete-green: #2a9d7e;

  /* --- Form inputs (light) --- */
  --form-input-bg: rgba(0, 0, 0, 0.02);
  --form-input-hover-bg: rgba(0, 0, 0, 0.03);
  --form-input-hover-border: rgba(42, 157, 126, 0.3);
  --form-input-focus-bg: rgba(42, 157, 126, 0.04);
  --form-input-focus-shadow: rgba(42, 157, 126, 0.1);
  --form-option-hover: rgba(42, 157, 126, 0.2);

  /* --- Context menu (light) --- */
  --context-menu-shadow: rgba(0, 0, 0, 0.2);
  --context-item-hover: rgba(42, 157, 126, 0.08);

  /* --- Scrollbars (light) --- */
  --scrollbar-thumb: rgba(0, 0, 0, 0.1);
  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.2);

  /* --- Canvas tooltip/overlay (light) --- */
  --canvas-tooltip-bg: rgba(255, 255, 255, 0.95);
  /* --canvas-overlay-bg: same as dark */

  /* --- Extra accent aliases (light) --- */
  --accent-pink: #db2777;
  --accent-indigo: #2874a6;
  --accent-indigo-rgb: 40, 116, 166;

  /* === Legacy tokens awaiting framework primitives — light overrides ===
     Only tokens that meaningfully differ in light mode. ============= */

  /* Tab chrome (light) */
  --tab-bg: linear-gradient(180deg, #f0f2f6, #e8eaef);
  --tab-border: rgba(0, 0, 0, 0.08);
  --tab-hover-bg: linear-gradient(180deg, #f7f8fa, #f0f2f6);
  --tab-active-bg: linear-gradient(180deg, #ffffff, #ffffff);
  --tab-active-border: rgba(0, 0, 0, 0.10);

  /* Module colors (light) */
  --module-color-storage: #2874a6;
  --module-color-storage-rgb: 40, 116, 166;
  --module-color-vms: #8e44ad;
  --module-color-vms-rgb: 142, 68, 173;
  --module-color-network: #2a9d7e;
  --module-color-network-rgb: 42, 157, 126;
  --module-color-node-mgmt: #2a9d7e;
  --module-color-node-mgmt-rgb: 42, 157, 126;
  --module-color-software: #8e44ad;
  --module-color-software-rgb: 142, 68, 173;

  /* Chart lines (light) */
  --fpm-chart-rx-line: #2a9d7e;
  --fpm-chart-rx-fill-start: rgba(42, 157, 126, 0.20);
  --fpm-chart-rx-fill-end: rgba(42, 157, 126, 0.0);
  --fpm-chart-tx-line: #2874a6;
  --fpm-chart-tx-fill-start: rgba(40, 116, 166, 0.15);
  --fpm-chart-tx-fill-end: rgba(40, 116, 166, 0.0);
  --fpm-chart-grid: rgba(0, 0, 0, 0.10);
  --fpm-chart-grid-text: #5e6470;

  /* === New tokens (Wave 6) — light overrides === */
  /* SSD: slightly deeper purple reads cleanly on white cards */
  --fpm-storage-ssd: #9333ea;
  /* Terminal: on light theme keep a dark-but-softer bg, not pure midnight */
  --fpm-terminal-bg: #2c2c33;
}

[data-theme="light"] .widget__sparkline path,
[data-theme="light"] .widget__sparkline polyline {
  stroke-width: 2.5;
}

[data-theme="light"] .widget__track {
  background: var(--widget-track-color);
}

[data-theme="light"] .widget__fill {
  background: var(--widget-accent);
}

[data-theme="light"] .widget__empty::before {
  background: var(--widget-accent);
  opacity: 0.7;
}

/* Reset & Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--fpm-font-family);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--fpm-text-primary);
  background: var(--fpm-bg-deep);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Glassmorphism Base Components */
.glass {
  background: var(--fpm-bg-surface);
  /* backdrop-filter removed */
  border: 1px solid var(--fpm-border-medium);
  box-shadow: var(--fpm-card-shadow);
  border-radius: var(--fpm-card-radius);
}

.glass-card {
  background: var(--fpm-bg-surface);
  /* backdrop-filter removed */
  border: 1px solid var(--fpm-border-medium);
  box-shadow: var(--fpm-card-shadow);
  border-radius: var(--fpm-card-radius);
  padding: var(--fpm-space-lg);
  transition: transform var(--transition-normal);
}

.glass-card:hover {
  transform: translateY(-2px);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: var(--fpm-space-md);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p {
  margin-bottom: var(--fpm-space-md);
}

/* Buttons - See components.css Section 12 for canonical button system */

/* Form Elements - Canonical form-group definition */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--fpm-space-sm);
  margin-bottom: var(--fpm-space-md);
}

.form-group label {
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--fpm-text-primary);
}

.fpm-form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: var(--fpm-space-sm);
  color: var(--fpm-text-secondary);
}

/* .fpm-form-input styles live in enhanced.css */

/* Layout Utilities */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--fpm-space-lg);
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

/* Grid System */
.grid {
  display: grid;
  gap: var(--fpm-space-lg);
}

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; align-items: start; }

/* Section gap utility */
.section-gap { margin-bottom: 1.5rem; }

/* Status Indicators */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--fpm-space-xs);
  padding: var(--fpm-space-xs) var(--fpm-space-sm);
  border-radius: var(--fpm-radius-sm);
  font-size: var(--text-xs);
  font-weight: 500;
}

.status-success {
  background: rgba(16, 185, 129, 0.1);
  color: var(--fpm-status-ok);
}

.status-warning {
  background: rgba(245, 158, 11, 0.1);
  color: var(--fpm-status-warn);
}

.status-error {
  background: rgba(239, 68, 68, 0.1);
  color: var(--fpm-status-error);
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  body {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: var(--fpm-text-primary);
  }
  
  .glass {
    background: var(--fpm-bg-surface);
    border-color: rgba(148, 163, 184, 0.1);
  }
  
}

/* Responsive Design */
@media (max-width: 768px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
  
  .container {
    padding: 0 var(--fpm-space-md);
  }
}

/* Application Layout */
.logo h1 {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: white;
  margin: 0;
}

/* Page System */
.page {
  display: none;
}

.page.active {
  display: block;
}

/* .form-actions styles live in forms.css */

/* .fpm-loading-spinner styles live in status.css */

/* Dark Mode Adjustments */
@media (prefers-color-scheme: dark) {
  .glass-card {
    background: var(--fpm-bg-surface);
  }
}

/* Tab Navigation */
.tab-button {
  display: flex;
  align-items: center;
  gap: var(--fpm-space-sm);
  padding: var(--ui-tab-padding, var(--fpm-space-sm) var(--fpm-space-lg));
  border: none;
  border-radius: var(--fpm-radius-md);
  background: transparent;
  color: var(--fpm-text-secondary);
  font-size: var(--ui-tab-font-size, var(--text-sm));
  min-height: var(--ui-tab-height, auto);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.tab-button:hover {
  background: var(--fpm-border-medium);
  color: var(--fpm-text-primary);
}

.tab-button.active {
  background: var(--fpm-accent);
  color: var(--accent-on-text, white);
}

.tab-button.disabled,
.tab-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Tab Content */
.tab-content {
  position: relative;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.tab-header {
  margin-bottom: var(--fpm-space-xl);
  text-align: center;
}

.tab-header h2 {
  color: var(--fpm-text-primary);
  margin-bottom: var(--fpm-space-sm);
}

.tab-header p {
  color: var(--fpm-text-secondary);
  margin: 0;
}

/* Dark Mode Tab Adjustments */
@media (prefers-color-scheme: dark) {
  .tab-button {
    color: var(--fpm-text-secondary);
  }
  
  .tab-button:hover {
    color: var(--fpm-text-primary);
  }
  
  .tab-header h2 {
    color: var(--fpm-text-primary);
  }
  
  .tab-header p {
    color: var(--fpm-text-secondary);
  }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .logo h1 {
    font-size: var(--text-xl);
  }

  .tab-button {
    flex-direction: column;
    gap: var(--fpm-space-xs);
    padding: var(--fpm-space-sm);
    min-width: 80px;
  }
}


/* ============= SHARED UTILITY CLASSES ============= */

/* Callout boxes - colored left-border alerts */
.fpm-callout-warn {
    background: var(--fpm-status-warn-dim);
    border-left: 3px solid var(--fpm-status-warn);
    padding: 12px;
    border-radius: 4px;
}

.fpm-callout-error {
    background: var(--fpm-status-error-dim);
    border-left: 3px solid var(--fpm-status-error);
    padding: 12px;
    border-radius: 4px;
}

.fpm-callout-info {
    background: var(--fpm-accent-dim);
    border-left: 3px solid var(--fpm-accent);
    padding: 12px;
    border-radius: 4px;
}

/* Inline code snippet */
.fpm-code-inline {
    background: var(--fpm-bg-surface);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: var(--fpm-font-mono);
    font-size: 0.9em;
}

/* Cluster, VM, Storage, Software, Network module styles,
   Setup Navigation, Mobile Responsiveness, Error States
   → MOVED TO baseAppStyles.css */