/* ==========================================================================
   Xenos Workspace · design tokens
   Brand: navy #172e38 · teal #19868b (primary) · white #ffffff · red #e1273d
   Every component reads these roles; never hard-code a hex in components.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Brand (fixed) */
  --brand-navy: #172e38;
  --brand-teal: #19868b;
  --brand-white: #ffffff;
  --brand-red: #e1273d;

  /* Teal ramp (derived from the brand teal) */
  --teal-50:  #eaf6f6;
  --teal-100: #d2ecec;
  --teal-200: #a6d9da;
  --teal-300: #6fc0c2;
  --teal-400: #34a3a7;
  --teal-500: #19868b;
  --teal-600: #136d71;
  --teal-700: #0f5559;
  --teal-800: #0c4044;

  /* Navy ramp */
  --navy-50:  #eef2f4;
  --navy-100: #dbe3e7;
  --navy-200: #b6c5cc;
  --navy-300: #8499a3;
  --navy-400: #587280;
  --navy-500: #34505d;
  --navy-600: #243e4a;
  --navy-700: #172e38;
  --navy-800: #10222a;
  --navy-900: #0a171d;

  /* Surfaces & ink (light) */
  --bg:            #f4f7f8;   /* page plane */
  --surface:       #ffffff;   /* cards */
  --surface-2:     #f8fafb;   /* inset panels, table headers */
  --surface-3:     #eef3f5;   /* hover wash */
  --surface-inverse: var(--brand-navy);
  --ink:           #13232b;   /* primary text  (AA on white: 15.6:1) */
  --ink-2:         #4b5f69;   /* secondary text (AA: 6.6:1) */
  --ink-3:         #6f818a;   /* muted text, placeholders (AA large, 4.5:1) */
  --ink-inverse:   #ffffff;
  --line:          #e1e8eb;   /* hairline borders */
  --line-strong:   #c9d5da;
  --focus:         #19868b;

  /* Semantic */
  --primary:       var(--brand-teal);
  --primary-strong:#136d71;   /* hover / pressed; text on white 6.0:1 */
  --primary-soft:  #e3f3f3;
  --on-primary:    #ffffff;
  --accent:        var(--brand-red);
  --accent-soft:   #fde8eb;

  /* Status (fixed across themes, always with icon + label) */
  --good:     #0f8a3c;  --good-soft:    #e3f5ea;
  --warning:  #b7791f;  --warning-soft: #fdf3dc;
  --serious:  #c2571f;  --serious-soft: #fdebe1;
  --critical: #c8243a;  --critical-soft:#fde6e9;
  --info:     #1f6fb2;  --info-soft:    #e4f0fa;

  /* Chart palette — validated with the CVD validator (light, surface #fff):
     3 slots pass all-pairs; slot 4 only on adjacent-pair forms. */
  --series-1: #00969c;   /* teal   */
  --series-2: #eb6834;   /* orange */
  --series-3: #4a3aa7;   /* violet */
  --series-4: #2a78d6;   /* blue   */
  --chart-grid: #e7edf0;
  --chart-axis: #c9d5da;
  --chart-muted: #7d8f97;
  /* Sequential (teal, one hue light→dark) */
  --seq-1: #d2ecec; --seq-2: #a6d9da; --seq-3: #6fc0c2; --seq-4: #34a3a7; --seq-5: #19868b; --seq-6: #0f5559;

  /* Shape & depth */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius:    10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --shadow-1: 0 1px 2px rgba(16, 34, 42, .06), 0 1px 1px rgba(16, 34, 42, .04);
  --shadow-2: 0 4px 16px rgba(16, 34, 42, .08), 0 1px 3px rgba(16, 34, 42, .06);
  --shadow-3: 0 18px 48px rgba(16, 34, 42, .18), 0 4px 12px rgba(16, 34, 42, .08);

  /* Type */
  --font: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-xs: 11px; --fs-sm: 12px; --fs: 13px; --fs-md: 13.5px; --fs-lg: 15px; --fs-xl: 17px; --fs-2xl: 20px; --fs-3xl: 26px;

  /* Layout */
  --topbar-h: 52px;
  --rail-w: 264px;
  --rail-w-collapsed: 64px;
  --gutter: 16px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Dark theme: stepped for the navy surface, not an automatic flip ---------- */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --bg: #0b1a20; --surface: #12252d; --surface-2: #162c35; --surface-3: #1c3540; --surface-inverse: #0a171d;
    --ink: #eef4f6; --ink-2: #b3c4cb; --ink-3: #8aa0a9; --line: #22404b; --line-strong: #2d4f5c; --focus: #4fc3c7;
    --primary: #2aa3a8; --primary-strong: #4fc3c7; --primary-soft: #143d43; --on-primary: #06181c;
    --accent: #f0566a; --accent-soft: #3a1a21;
    --good: #3fcf7a; --good-soft: #123324; --warning: #f2b441; --warning-soft: #3a2e14; --serious: #f08a57; --serious-soft: #3a2218;
    --critical: #f36b7d; --critical-soft: #3c1a21; --info: #6cb4f0; --info-soft: #14304a;
    --series-1: #12a7ad; --series-2: #d95926; --series-3: #9085e9; --series-4: #3987e5;
    --chart-grid: #1e3843; --chart-axis: #2d4f5c; --chart-muted: #8aa0a9;
    --seq-1: #143d43; --seq-2: #16585d; --seq-3: #1b7479; --seq-4: #2aa3a8; --seq-5: #4fc3c7; --seq-6: #a6e3e5;
    --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 6px 20px rgba(0,0,0,.35); --shadow-3: 0 22px 60px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1a20; --surface: #12252d; --surface-2: #162c35; --surface-3: #1c3540; --surface-inverse: #0a171d;
  --ink: #eef4f6; --ink-2: #b3c4cb; --ink-3: #8aa0a9; --line: #22404b; --line-strong: #2d4f5c; --focus: #4fc3c7;
  --primary: #2aa3a8; --primary-strong: #4fc3c7; --primary-soft: #143d43; --on-primary: #06181c;
  --accent: #f0566a; --accent-soft: #3a1a21;
  --good: #3fcf7a; --good-soft: #123324; --warning: #f2b441; --warning-soft: #3a2e14; --serious: #f08a57; --serious-soft: #3a2218;
  --critical: #f36b7d; --critical-soft: #3c1a21; --info: #6cb4f0; --info-soft: #14304a;
  --series-1: #12a7ad; --series-2: #d95926; --series-3: #9085e9; --series-4: #3987e5;
  --chart-grid: #1e3843; --chart-axis: #2d4f5c; --chart-muted: #8aa0a9;
  --seq-1: #143d43; --seq-2: #16585d; --seq-3: #1b7479; --seq-4: #2aa3a8; --seq-5: #4fc3c7; --seq-6: #a6e3e5;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 6px 20px rgba(0,0,0,.35); --shadow-3: 0 22px 60px rgba(0,0,0,.55);
}