@layer tokens, legacy, components, pages, utilities;

@layer tokens {
/* ==========================================================================
 * Aristo Control Panel — Canonical Theme Contract
 * v10.51.6 / UI 6.0 Token Architecture
 *
 * THIS IS THE SINGLE SOURCE OF TRUTH FOR COLOR.
 *
 * Rules:
 *   1. No component stylesheet may hardcode a UI color. Use a token.
 *   2. Every token is defined for BOTH themes. Adding a token means adding
 *      it in both blocks, or Day mode silently breaks.
 *   3. Tokens that must NOT flip with the theme (brand rail, physical
 *      hardware renderings, print surfaces) live in the "fixed" block and
 *      are named --fx-*.
 *
 * Theme is selected by html[data-ui-theme="light"|"dark"], written by
 * _theme_bootstrap.html before first paint. Never toggle a body class for
 * color; the cascade below handles it.
 * ========================================================================== */

/* ---------- Theme-agnostic scale ---------- */
:root {
  color-scheme: light dark;

  /* Geometry */
  --radius-xs: 6px;
  --radius-sm: 9px;
  --radius-md: 12px;
  --radius-lg: 15px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --control-h: 40px;
  --control-h-sm: 32px;
  --row-h: 48px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 22px;
  --space-6: 30px;
  --space-7: 42px;

  /* Page geometry */
  --content-max: 1880px;
  --page-pad-x: clamp(22px, 2vw, 38px);
  --page-pad-y: clamp(22px, 2vw, 34px);
  --section-gap: 18px;
  --card-pad: 18px;
  --card-pad-lg: 22px;

  /* Typography scale */
  --text-2xs: 9.5px;
  --text-xs: 11px;
  --text-sm: 12.5px;
  --text-md: 13px;
  --text-base: 14px;
  --text-lg: 19px;
  --text-xl: 24px;
  --text-2xl: clamp(26px, 2.25vw, 34px);

  --font-ui: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", ui-monospace, monospace;

  /* Use stable, non-interpolated weights. Several screens run on hosts where
     Inter is unavailable; synthetic 450/675 weights produced inconsistent
     glyph baselines and number widths in the system fallback font. */
  --weight-normal: 400;
  --weight-medium: 600;
  --weight-semi: 700;
  --weight-bold: 800;
  --line-ui: 1.4;
  --line-control: 1.2;

  /* Motion */
  --ease: cubic-bezier(.32, .72, .29, 1);
  --dur-fast: .14s;
  --dur: .22s;
}

/* ==========================================================================
 * NIGHT  —  canonical Heroic low-light system (matches the approved mockup)
 * ========================================================================== */
html[data-ui-theme="dark"] {
  color-scheme: dark;

  /* -- Surfaces, in elevation order -- */
  --surface-base:     #030d1a;   /* page canvas */
  --surface-sunken:   #020912;   /* wells, deep insets */
  --surface-inset:    #0a1b30;   /* table headers, sub-panels */
  --surface-1:        #071a30;   /* standard card */
  --surface-2:        #0b2138;   /* nested / raised card */
  --surface-3:        #10283f;   /* popover, menu, tooltip */
  --surface-hover:    #14314c;   /* row + control hover */
  --surface-active:   #173650;
  --surface-overlay:  rgba(3, 12, 25, .74);   /* modal scrim */

  /* Token-owned material depth. These replace the literal gradients that were
     stripped from the legacy sheets during the CSS migration. */
  --surface-card:        linear-gradient(145deg, #0b223a 0%, #081b31 52%, #06172a 100%);
  --surface-card-raised: linear-gradient(145deg, #102a45 0%, #0c233b 58%, #091c31 100%);
  --surface-card-inset:  linear-gradient(180deg, #061529 0%, #04101f 100%);
  --surface-header:      linear-gradient(180deg, rgba(15, 41, 67, .94) 0%, rgba(7, 25, 45, .94) 100%);
  --surface-highlight:   linear-gradient(135deg, rgba(255, 255, 255, .035), transparent 42%);

  /* Canonical data-table surfaces. Keep table hierarchy separate from generic
     sunken wells so Day mode never turns whole inventories blue-grey. */
  --table-shell-bg:    var(--surface-card);
  --table-toolbar-bg:  var(--surface-header);
  --table-head-bg:     var(--surface-inset);
  --table-row-bg:      var(--surface-1);
  --table-row-hover-bg:var(--surface-hover);
  --table-sticky-bg:   var(--surface-1);
  --table-rule:        var(--border-subtle);
  --image-scrim:         linear-gradient(180deg, transparent 54%, rgba(4, 17, 34, .68) 100%);

  /* Workspace atmospherics */
  --workspace-bg:
    radial-gradient(circle at 76% -11%, rgba(31, 119, 255, .21), transparent 36rem),
    radial-gradient(circle at 108% 38%, rgba(31, 211, 255, .07), transparent 32rem),
    linear-gradient(180deg, #041226 0%, #05152a 42%, #041122 100%);
  --workspace-grid: rgba(105, 164, 224, .032);
  --workspace-grid-opacity: .20;

  /* -- Text, in emphasis order -- */
  --text-strong:  #f2f8ff;   /* headings */
  --text-body:    #dce9f6;   /* default body */
  --text-muted:   #8ba4bd;   /* secondary */
  --text-subtle:  #6f8aa4;   /* tertiary, meta, timestamps */
  --text-faint:   #55708a;   /* disabled */
  --text-on-accent: #ffffff;

  /* -- Borders -- */
  --border-subtle: rgba(112, 167, 221, .09);
  --border:        rgba(112, 167, 221, .16);
  --border-strong: rgba(121, 181, 239, .27);
  --border-loud:   rgba(134, 195, 250, .40);

  /* -- Accent -- */
  --accent:         #348cff;
  --accent-hover:   #4b9bff;
  --accent-active:  #1d70ef;
  --accent-soft:    rgba(52, 140, 255, .13);
  --accent-softer:  rgba(52, 140, 255, .07);
  --accent-text:    #70b7ff;
  --accent-ring:    rgba(52, 140, 255, .30);
  --accent-glow:    0 0 26px rgba(47, 137, 255, .18);

  /* -- Status -- */
  --success:      #31dfa8;
  --success-soft: rgba(49, 223, 168, .11);
  --success-text: #55e6b4;
  --warning:      #ffc15c;
  --warning-soft: rgba(255, 193, 92, .11);
  --warning-text: #ffcf82;
  --danger:       #ff6578;
  --danger-soft:  rgba(255, 101, 120, .11);
  --danger-text:  #ff8090;
  --info:         #38bdf8;
  --info-soft:    rgba(56, 189, 248, .11);
  --info-text:    #6dd0fb;
  --neutral:      #64809b;
  --neutral-soft: rgba(100, 128, 155, .13);

  /* -- Data visualization -- */
  --data-1: #348cff;   /* inbound / primary series */
  --data-2: #31d7d0;   /* outbound / secondary */
  --data-3: #31dfa8;
  --data-4: #ffc15c;
  --data-5: #ff6578;
  --data-6: #a78bfa;
  --data-7: #f472b6;
  --data-8: #7dd3fc;
  --chart-grid:      rgba(120, 165, 214, .10);
  --chart-axis:      rgba(139, 164, 189, .55);
  --chart-label:     #8ba4bd;
  --chart-fill-from: rgba(52, 140, 255, .30);
  --chart-fill-to:   rgba(52, 140, 255, .00);
  --chart-canvas:    #061729;
  --chart-crosshair: rgba(160, 205, 255, .45);
  --sflow-flow-motion: rgba(244, 250, 255, .92);
  --sflow-flow-motion-glow: rgba(49, 215, 208, .28);
  --sflow-live-pill-bg: rgba(49, 223, 168, .10);
  --sflow-live-pill-border: rgba(49, 223, 168, .32);

  /* -- Elevation -- */
  --shadow-sm: 0 1px 0 rgba(255, 255, 255, .022) inset, 0 4px 14px rgba(0, 5, 17, .16);
  --shadow:    0 1px 0 rgba(255, 255, 255, .022) inset, 0 18px 48px rgba(0, 5, 17, .18);
  --shadow-lg: 0 24px 70px rgba(0, 5, 18, .42), 0 1px 0 rgba(255, 255, 255, .025) inset;

  /* -- Form controls -- */
  --field-bg:          rgba(4, 20, 39, .76);
  --field-bg-hover:    rgba(6, 26, 48, .86);
  --field-border:      rgba(129, 178, 226, .24);
  --field-placeholder: #5d778f;
  --field-disabled-bg: rgba(6, 20, 36, .55);

  /* -- Buttons / selectable controls -- */
  --button-bg:          #102b47;
  --button-bg-hover:    #173958;
  --button-border:      rgba(135, 190, 241, .30);
  --button-border-hover:rgba(145, 204, 255, .46);
  --button-text:        #e9f4ff;
  --button-primary-bg:        #1d70ef;
  --button-primary-bg-hover:  #1668e0;
  --button-primary-bg-active: #1157c2;
  --button-primary-text:      #ffffff;
  --button-danger-bg:         #b32639;
  --button-danger-bg-hover:   #941f30;
  --button-danger-text:       #ffffff;
  --button-success-bg:        #31dfa8;
  --button-success-text:      #031a14;
  --button-disabled-bg: rgba(16, 43, 71, .46);
  --button-disabled-text:#7892aa;
  --choice-bg:          #091d33;
  --choice-bg-hover:    #0d2742;
  --choice-bg-selected: rgba(52, 140, 255, .13);

  /* -- Map / geo -- */
  --map-filter: brightness(.62) saturate(.78) contrast(1.06) hue-rotate(178deg) invert(1);
  --map-chrome-bg: #0a1b30;
  --map-marker-bg: linear-gradient(145deg, #134b87, #09294c);
  --map-marker-border: rgba(92, 164, 244, .52);
  --map-marker-text: #f3f8ff;
  --map-marker-subtle: #b9cee3;
  --map-marker-shadow: 0 8px 24px rgba(0, 7, 20, .38), 0 0 18px rgba(40, 128, 243, .18);
  --map-overlay-bg: rgba(7, 26, 48, .94);
  --map-overlay-border: rgba(121, 181, 239, .26);
  --map-overlay-text: #f2f8ff;
  --map-overlay-muted: #a7bdd2;
  --map-overlay-shadow: 0 12px 30px rgba(0, 5, 17, .28);
}

/* ==========================================================================
 * DAY  —  bright workspace, same Heroic data language
 *
 * The navigation rail deliberately stays dark in Day mode: it carries the
 * brand identity from the mockup and anchors the workspace. Rail colors are
 * --fx-rail-* below and do not participate in this block.
 * ========================================================================== */
html[data-ui-theme="light"] {
  color-scheme: light;

  --surface-base:     #eef4fa;
  --surface-sunken:   #e3ecf5;
  --surface-inset:    #f4f8fc;
  --surface-1:        #ffffff;
  --surface-2:        #f8fbfe;
  --surface-3:        #ffffff;
  --surface-hover:    #f1f6fc;
  --surface-active:   #e8f1fb;
  --surface-overlay:  rgba(20, 42, 68, .38);

  --surface-card:        linear-gradient(145deg, #ffffff 0%, #fbfdff 52%, #f4f8fc 100%);
  --surface-card-raised: linear-gradient(145deg, #ffffff 0%, #f8fbff 58%, #edf4fb 100%);
  --surface-card-inset:  linear-gradient(180deg, #f5f9fd 0%, #eaf2fa 100%);
  --surface-header:      linear-gradient(180deg, #fbfdff 0%, #f1f6fb 100%);
  --surface-highlight:   linear-gradient(135deg, rgba(255, 255, 255, .86), transparent 48%);

  /* Canonical data-table surfaces. */
  --table-shell-bg:    var(--surface-card);
  --table-toolbar-bg:  var(--surface-header);
  --table-head-bg:     var(--surface-inset);
  --table-row-bg:      var(--surface-1);
  --table-row-hover-bg:var(--surface-hover);
  --table-sticky-bg:   var(--surface-1);
  --table-rule:        var(--border-subtle);
  --image-scrim:         linear-gradient(180deg, transparent 62%, rgba(235, 243, 251, .54) 100%);

  --workspace-bg:
    radial-gradient(circle at 76% -12%, rgba(41, 126, 244, .12), transparent 38rem),
    radial-gradient(circle at 108% 38%, rgba(24, 186, 216, .06), transparent 32rem),
    linear-gradient(180deg, #f6f9fd 0%, #eef4fa 54%, #edf3f9 100%);
  --workspace-grid: rgba(49, 91, 132, .025);
  --workspace-grid-opacity: .30;

  --text-strong:  #0b1d31;
  --text-body:    #1d3348;
  --text-muted:   #4a627a;
  --text-subtle:  #56697d;
  --text-faint:   #627487;
  --text-on-accent: #ffffff;

  --border-subtle: rgba(35, 78, 122, .08);
  --border:        rgba(35, 78, 122, .15);
  --border-strong: rgba(30, 76, 124, .25);
  --border-loud:   rgba(26, 72, 122, .38);

  --accent:         #1668e0;
  --accent-hover:   #1157c2;
  --accent-active:  #0e4da8;
  --accent-soft:    rgba(22, 104, 224, .09);
  --accent-softer:  rgba(22, 104, 224, .05);
  --accent-text:    #1163d6;
  --accent-ring:    rgba(22, 104, 224, .26);
  --accent-glow:    0 0 0 rgba(0, 0, 0, 0);

  /* Status hues are darkened for contrast on white, but keep the same identity. */
  --success:      #0e9271;
  --success-soft: rgba(14, 146, 113, .10);
  --success-text: #0b7e61;
  --warning:      #a96f0a;
  --warning-soft: rgba(169, 111, 10, .11);
  --warning-text: #8f5d07;
  --danger:       #d13148;
  --danger-soft:  rgba(209, 49, 72, .09);
  --danger-text:  #b32639;
  --info:         #0d7fb8;
  --info-soft:    rgba(13, 127, 184, .10);
  --info-text:    #0a6b9c;
  --neutral:      #5c748c;
  --neutral-soft: rgba(92, 116, 140, .10);

  --data-1: #1668e0;
  --data-2: #0d9aa0;
  --data-3: #0e9271;
  --data-4: #b8770c;
  --data-5: #d13148;
  --data-6: #7c5cd6;
  --data-7: #c0417f;
  --data-8: #1189c4;
  --chart-grid:      rgba(35, 78, 122, .09);
  --chart-axis:      rgba(92, 116, 140, .60);
  --chart-label:     #5c748c;
  --chart-fill-from: rgba(22, 104, 224, .22);
  --chart-fill-to:   rgba(22, 104, 224, .00);
  --chart-canvas:    #ffffff;
  --chart-crosshair: rgba(22, 104, 224, .45);
  --sflow-flow-motion: rgba(255, 255, 255, .96);
  --sflow-flow-motion-glow: rgba(22, 104, 224, .18);
  --sflow-live-pill-bg: rgba(14, 146, 113, .08);
  --sflow-live-pill-border: rgba(14, 146, 113, .26);

  --shadow-sm: 0 1px 0 rgba(255, 255, 255, .80) inset, 0 4px 12px rgba(35, 63, 91, .05);
  --shadow:    0 1px 0 rgba(255, 255, 255, .80) inset, 0 14px 38px rgba(35, 63, 91, .07);
  --shadow-lg: 0 24px 64px rgba(28, 55, 84, .16), 0 1px 0 rgba(255, 255, 255, .90) inset;

  --field-bg:          #ffffff;
  --field-bg-hover:    #fbfdff;
  --field-border:      rgba(30, 76, 124, .22);
  --field-placeholder: #8fa2b5;
  --field-disabled-bg: #eef2f7;

  --button-bg:          #eaf2fb;
  --button-bg-hover:    #dce9f7;
  --button-border:      rgba(30, 76, 124, .28);
  --button-border-hover:rgba(26, 72, 122, .42);
  --button-text:        #16334f;
  --button-primary-bg:        #1668e0;
  --button-primary-bg-hover:  #1157c2;
  --button-primary-bg-active: #0e4da8;
  --button-primary-text:      #ffffff;
  --button-danger-bg:         #b32639;
  --button-danger-bg-hover:   #941f30;
  --button-danger-text:       #ffffff;
  --button-success-bg:        #0b7e61;
  --button-success-text:      #ffffff;
  --button-disabled-bg: #e8eef5;
  --button-disabled-text:#63778a;
  --choice-bg:          #f7fafd;
  --choice-bg-hover:    #eef5fc;
  --choice-bg-selected: rgba(22, 104, 224, .08);

  --map-filter: none;
  --map-chrome-bg: #ffffff;
  --map-marker-bg: linear-gradient(145deg, #ffffff, #eef5fc);
  --map-marker-border: rgba(22, 104, 224, .38);
  --map-marker-text: #0b1d31;
  --map-marker-subtle: #4a627a;
  --map-marker-shadow: 0 8px 22px rgba(28, 55, 84, .16), 0 0 0 1px rgba(255, 255, 255, .72) inset;
  --map-overlay-bg: rgba(255, 255, 255, .94);
  --map-overlay-border: rgba(30, 76, 124, .20);
  --map-overlay-text: #0b1d31;
  --map-overlay-muted: #4a627a;
  --map-overlay-shadow: 0 10px 28px rgba(28, 55, 84, .14);
}

/* ==========================================================================
 * FIXED  —  tokens that intentionally do NOT flip with the theme
 * ========================================================================== */
:root {
  /* Navigation rail: dark in both themes, per the Heroic brand. */
  --fx-rail-bg:
    radial-gradient(circle at 25% -4%, rgba(52, 137, 255, .28), transparent 23rem),
    radial-gradient(circle at 120% 46%, rgba(33, 214, 255, .08), transparent 25rem),
    linear-gradient(180deg, #031127 0%, #051a35 52%, #04142b 100%);
  --fx-rail-border: rgba(108, 170, 231, .15);
  --fx-rail-shadow: 18px 0 52px rgba(0, 4, 16, .30);
  --fx-rail-text: #b9cee3;
  --fx-rail-text-strong: #ffffff;
  --fx-rail-text-muted: #708da9;
  --fx-rail-hover-bg: rgba(255, 255, 255, .06);
  --fx-rail-hover-text: #e7f0fa;
  --fx-rail-active-bg:
    radial-gradient(circle at 8% 50%, rgba(72, 164, 255, .28), transparent 50%),
    linear-gradient(90deg, rgba(22, 100, 224, .50), rgba(16, 64, 142, .28));
  --fx-rail-active-border: rgba(67, 154, 255, .44);
  --fx-rail-active-shadow:
    inset 0 0 0 1px rgba(116, 192, 255, .07),
    0 11px 26px rgba(0, 8, 24, .22),
    0 0 26px rgba(47, 137, 255, .08);
  --fx-rail-icon-bg: rgba(255, 255, 255, .045);
  --fx-rail-brand-accent: #70b5ff;

  /* Photographic/media copy is theme-invariant. The image itself provides the
     visual context; a fixed scrim and light foreground keep copy readable in
     both Day and Night without borrowing ordinary page-text tokens. */
  --fx-media-bg:          #0b1f36;
  --fx-media-text:        #ffffff;
  --fx-media-muted:       #dbe8f6;
  --fx-media-eyebrow:     #cfe2f7;
  --fx-media-success:     #b9f2dc;
  --fx-media-chip-bg:     rgba(255, 255, 255, .18);
  --fx-media-text-shadow: 0 2px 22px rgba(0, 6, 18, .50);
  --fx-media-veil:        linear-gradient(180deg, rgba(2, 10, 20, .08) 0%, rgba(2, 10, 20, .32) 44%, rgba(2, 10, 20, .82) 100%);
  --fx-media-card-veil:   linear-gradient(180deg, rgba(3, 12, 24, .10) 0%, rgba(3, 12, 24, .58) 78%, rgba(3, 12, 24, .78) 100%);
  --fx-media-plate-bg:    radial-gradient(circle at 22% 12%, rgba(52, 140, 255, .22), transparent 60%), linear-gradient(145deg, #12314f, #061529);
  --fx-media-plate-text:  rgba(150, 199, 250, .42);
  --fx-media-city-shadow: 0 1px 12px rgba(0, 6, 16, .55);

  /* Physical hardware renderings (chassis, racks, optics, port cages).
     The device body is a fixed neutral-metal material in both appearances;
     theme switching changes the surrounding UI, never the equipment itself. */
  --fx-hw-chassis:      #8d989f;
  --fx-hw-chassis-edge: #4d5a63;
  --fx-hw-metal-a:      #d2d8dc;
  --fx-hw-metal-mid:    #a7b0b7;
  --fx-hw-metal-b:      #717e87;
  --fx-hw-face-bg:      linear-gradient(180deg, var(--device-metal-a, #d2d8dc) 0%, var(--device-metal-mid, #a7b0b7) 46%, var(--device-metal-b, #717e87) 100%);
  --fx-hw-face-shadow:  inset 0 1px 0 rgba(255, 255, 255, .68), inset 0 -1px 0 rgba(20, 31, 40, .45), 0 14px 34px rgba(0, 7, 17, .28);
  --fx-hw-stage:        transparent;
  --fx-hw-cavity:       #080e13;
  --fx-hw-block:        #273b4e;
  --fx-hw-rail:         #1d2831;
  --fx-hw-vent:         #26323b;
  --fx-hw-port:         #080c0f;
  --fx-hw-port-up:      #31dfa8;
  --fx-hw-port-down:    #485761;
  --fx-hw-port-disabled:#391a20;
  --fx-hw-label:        #9fb2c2;
  --fx-hw-led-green:    #31dfa8;
  --fx-hw-led-amber:    #ffc15c;
  --fx-hw-led-red:      #ff6578;
  --fx-hw-ink:          #142735;
  --fx-hw-ink-muted:    #425766;
  --fx-hw-card-face:    linear-gradient(180deg, #cfd6db 0%, #aeb8bf 48%, #84919a 100%);
  --fx-hw-card-edge:    #66747e;
  --fx-hw-card-shadow:  inset 0 1px 0 rgba(255,255,255,.70), inset 0 -1px 0 rgba(15,28,38,.34), 0 2px 4px rgba(0,8,16,.22);
  --fx-hw-bay:          #101a21;
  --fx-hw-bay-edge:     #40505b;
  --fx-hw-handle:       #33434e;
  --fx-hw-screw:        #73838e;
  --fx-hw-link-dim:     rgba(49,223,168,.36);
  --fx-hw-link-glow:    rgba(49,223,168,.75);
  --fx-hw-activity-glow:rgba(255,193,92,.84);
  --fx-slx-face-top:     #6f49a0;
  --fx-slx-face-mid:     #573687;
  --fx-slx-face-bottom:  #45286f;
  --fx-slx-panel:        #382250;
  --fx-slx-panel-soft:   rgba(35,19,53,.18);
  --fx-slx-edge:         #2c1c3e;
  --fx-slx-edge-strong:  rgba(28,15,42,.72);
  --fx-slx-divider:      rgba(20,12,32,.55);
  --fx-slx-highlight:    rgba(255,255,255,.20);
  --fx-slx-shadow:       rgba(0,0,0,.30);
  --fx-slx-console-shadow:#000000;
  --fx-slx-port-inset:   rgba(255,255,255,.06);
  --fx-slx-text:         #f4efff;
  --fx-slx-text-strong:  #ffffff;
  --fx-slx-text-muted:   #d8ccec;
  --fx-slx-port-top:     #26343d;
  --fx-slx-port-mid:     #0a1014;
  --fx-slx-port-bottom:  #172229;
  --fx-slx-port-edge:    #15191d;
  --fx-slx-port-up:      #218f7b;
  --fx-slx-port-down:    #542d42;
  --fx-slx-vent-a:       #21172d;
  --fx-slx-vent-b:       #50316f;
  --fx-slx-fan-core:     #17111e;
  --fx-slx-fan-ring:     #6e4a94;
  --fx-slx-fan-mid:      #2b1c3b;
  /* Dell EMC Z9332F-ON, from the photographed front and rear faces. */
  --fx-dell-face-top:    #22272c;
  --fx-dell-face-bottom: #0c0f12;
  --fx-dell-perf-hole:   #030405;
  --fx-dell-perf-rim:    #2e343a;
  --fx-dell-cage-rim:    #c3c9ce;
  --fx-dell-cage-shade:  #6d757c;
  --fx-dell-cage-mouth:  #06080a;
  --fx-dell-cage-tongue: #3b434a;
  --fx-dell-text:        #eef1f4;
  --fx-dell-text-muted:  #a3acb4;
  --fx-dell-jack:        #0a0d10;
  --fx-dell-jack-rim:    #aab1b7;
  --fx-dell-jack-pins:   #b89f5f;
  --fx-dell-rear-a:      #e2e5e8;
  --fx-dell-rear-b:      #a3abb1;
  --fx-dell-rear-edge:   #6b747b;
  --fx-dell-grille:      #c9ced2;
  --fx-dell-grille-hole: #2b3035;
  --fx-dell-fan:         #f26b1d;
  --fx-dell-fan-dark:    #b8480b;
  --fx-dell-fan-hub:     #16181a;
  --fx-dell-fan-hex:     #26292c;
  --fx-dell-tab:         #e2263a;
  --fx-dell-handle:      #15181b;

  /* Rack elevations are fixed physical renderings. Their labels and grid must
     never inherit Day/Night page text or border tokens. */
  --fx-rack-text:            #eef5fb;
  --fx-rack-muted:           #9fb2c2;
  --fx-rack-cavity:          #0b141c;
  --fx-rack-cavity-border:   #2b3944;
  --fx-rack-grid:            rgba(122, 144, 160, .16);
  --fx-rack-divider:         rgba(112, 132, 148, .28);
  --fx-rack-plinth-border:   #38444e;
  --fx-rack-inset-shadow:    inset 0 0 0 1px rgba(255, 255, 255, .025), inset 0 12px 24px rgba(0, 0, 0, .18);
  --fx-rack-drop-shadow:     drop-shadow(0 12px 20px rgba(0, 3, 11, .28));

  /* The datacenter editor intentionally previews both appearances at once. */
  --fx-preview-light-bg: #eef4fa;
  --fx-preview-dark-bg:  #030d1a;

  /* Documents that are printed or represent paper (LOA, invoice PDF
     previews, QR/signature blocks). Always paper-white. */
  --fx-paper:        #ffffff;
  --fx-paper-text:   #101828;
  --fx-paper-muted:  #475467;
  --fx-paper-border: #d0d5dd;
}

/* Print always renders the paper contract regardless of the active theme. */
@media print {
  :root, html[data-ui-theme="light"], html[data-ui-theme="dark"] {
    color-scheme: light;
    --surface-base: #ffffff;
    --surface-1: #ffffff;
    --surface-2: #ffffff;
    --surface-3: #ffffff;
    --surface-inset: #f5f7fa;
    --text-strong: #101828;
    --text-body: #1d2939;
    --text-muted: #475467;
    --text-subtle: #667085;
    --border: #d0d5dd;
    --border-strong: #b4bcc7;
    --workspace-bg: #ffffff;
    --shadow: none;
    --shadow-sm: none;
    --shadow-lg: none;
  }
}

/* ==========================================================================
 * LEGACY ALIASES
 *
 * The historical token names used throughout style.css and design-system.css
 * are mapped onto the contract above so every existing rule that already went
 * through a variable inherits correct Day/Night behavior for free.
 *
 * Do not use these in new code.
 * ========================================================================== */
:root {
  --bg: var(--surface-base);
  --surface: var(--surface-1);
  --surface-alt: var(--surface-inset);
  --text: var(--text-body);
  --muted: var(--text-muted);
  /* --border and --border-strong are already contract names. */
  --primary: var(--accent);
  --primary-dark: var(--accent-active);
  --primary-soft: var(--accent-soft);
  --navy: var(--surface-sunken);
  --radius: var(--radius-lg);

  --ui-content-max: var(--content-max);
  --ui-page-pad-x: var(--page-pad-x);
  --ui-page-pad-y: var(--page-pad-y);
  --ui-section-gap: var(--section-gap);
  --ui-card-pad: var(--card-pad);
  --ui-card-pad-lg: var(--card-pad-lg);
  --ui-control-h: var(--control-h);
  --ui-control-radius: var(--radius-sm);
  --ui-card-radius: var(--radius-lg);
  --ui-row-h: var(--row-h);
  --ui-text-xs: var(--text-xs);
  --ui-text-sm: var(--text-sm);
  --ui-text-md: var(--text-base);
  --ui-text-lg: var(--text-lg);
  --ui-shadow: var(--shadow);
  --ui-elevated-shadow: var(--shadow-lg);
}

}