/* ============================================================
   Freelancer Zo — Design tokens
   Chart palette validated with the dataviz palette validator
   (6 categorical slots, light surface #ffffff / dark #141726):
   all six checks PASS in both modes.
   ============================================================ */

:root {
  color-scheme: dark;

  /* ---- Surfaces & ink (dark is the default theme) ---- */
  --plane:        #0b0d14;
  --plane-2:      #0f1120;
  --surface:      #141726;   /* chart surface — the validator's target */
  --surface-2:    #1a1e31;
  --surface-3:    #222741;
  --surface-hover:#1e2338;
  --border:       #262b44;
  --border-soft:  rgba(255, 255, 255, .07);
  --ring:         rgba(110, 98, 245, .35);

  --ink:          #f1f3fa;
  --ink-2:        #a6adc8;
  --ink-3:        #717a99;
  --ink-inv:      #0b0d14;

  /* ---- Brand (chrome only — never a data color) ---- */
  --brand:        #6e62f5;
  --brand-2:      #9a8cff;
  --brand-ink:    #ffffff;
  --brand-wash:   rgba(110, 98, 245, .14);
  --brand-grad:   linear-gradient(135deg, #6e62f5 0%, #9a8cff 100%);

  /* ---- Categorical series (dark steps) ---- */
  --s1: #3987e5;  /* blue    */
  --s2: #d95926;  /* orange  */
  --s3: #199e70;  /* aqua    */
  --s4: #c98500;  /* yellow  */
  --s5: #d55181;  /* magenta */
  --s6: #9085e9;  /* violet  */
  --s-void: #7c849e;            /* "no longer active" neutral */
  --s1-track: #23507f;          /* lighter-on-dark step of the blue ramp */
  --s1-wash: rgba(57, 135, 229, .14);

  /* ---- Status (fixed, never themed, always with icon + label) ---- */
  --good:     #0ca30c;
  --warning:  #fab219;
  --serious:  #ec835a;
  --critical: #d03b3b;
  --good-wash:     rgba(12, 163, 12, .14);
  --warning-wash:  rgba(250, 178, 25, .14);
  --serious-wash:  rgba(236, 131, 90, .14);
  --critical-wash: rgba(208, 59, 59, .14);

  /* ---- Chart chrome ---- */
  --grid:     #232840;
  --axis:     #313753;
  --muted-ink:#8b93ae;

  /* ---- Elevation ---- */
  --sh-1: 0 1px 2px rgba(0, 0, 0, .28);
  --sh-2: 0 4px 16px -4px rgba(0, 0, 0, .45);
  --sh-3: 0 18px 48px -12px rgba(0, 0, 0, .62);

  /* ---- Geometry ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  --sidebar-w: 256px;
  --topbar-h: 64px;

  --font: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;

  --t-fast: 140ms cubic-bezier(.4, 0, .2, 1);
  --t-base: 240ms cubic-bezier(.4, 0, .2, 1);
  --t-slow: 520ms cubic-bezier(.22, 1, .36, 1);
}

/* ---- Light theme ---- */
:root[data-theme="light"] {
  color-scheme: light;

  --plane:        #f3f5fa;
  --plane-2:      #eef1f8;
  --surface:      #ffffff;   /* chart surface — the validator's target */
  --surface-2:    #f7f8fc;
  --surface-3:    #eef0f7;
  --surface-hover:#f4f6fb;
  --border:       #e3e6f0;
  --border-soft:  rgba(17, 20, 38, .08);
  --ring:         rgba(90, 79, 224, .28);

  --ink:          #111426;
  --ink-2:        #565d78;
  --ink-3:        #848ba5;
  --ink-inv:      #ffffff;

  --brand:        #5a4fe0;
  --brand-2:      #7c6bff;
  --brand-wash:   rgba(90, 79, 224, .10);
  --brand-grad:   linear-gradient(135deg, #5a4fe0 0%, #7c6bff 100%);

  --s1: #2a78d6;
  --s2: #eb6834;
  --s3: #1baf7a;
  --s4: #eda100;
  --s5: #e87ba4;
  --s6: #4a3aa7;
  --s-void: #8a90a6;
  --s1-track: #b7d3f6;
  --s1-wash: rgba(42, 120, 214, .12);

  --grid:     #e8eaf2;
  --axis:     #cdd2e0;
  --muted-ink:#7b8299;

  --sh-1: 0 1px 2px rgba(17, 20, 38, .06);
  --sh-2: 0 6px 20px -8px rgba(17, 20, 38, .14);
  --sh-3: 0 22px 52px -16px rgba(17, 20, 38, .22);
}

/* ------------------------------------------------------------
   Reset
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--plane);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
svg { display: block; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border-radius: var(--r-pill);
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: content-box; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}