/* ============================================================
   ScaleUP — design tokens
   The single source of truth for colour, type, depth and motion.
   Nothing below this file should contain a raw hex value.

   Palette note: the four series colours are validated for colour-vision
   deficiency separation and contrast against their own surfaces, in both
   modes. Don't hand-edit them — re-run the validator if they must change.
   ============================================================ */

:root {
  color-scheme: light;

  /* ---- planes ------------------------------------------------ */
  --page:        #FFFFFF;
  --surface:     #FFFFFF;   /* cards */
  --surface-2:   #F7F7F8;   /* insets, track fills, hover wash */
  --surface-3:   #F1F1F3;   /* pressed, skeleton base */
  --glass:       rgba(255, 255, 255, 0.72);
  --glass-line:  rgba(10, 10, 11, 0.06);

  /* ---- ink --------------------------------------------------- */
  --text:        #0A0A0B;
  --text-2:      #52525B;
  /* Supporting copy. Was #8E8E93 (~3.5:1) which read as disabled rather than
     secondary; this clears 5:1 on white while staying clearly recessive.
     Chart axis labels keep the lighter step via --axis-ink below. */
  --text-3:      #6E6E77;
  --text-on-accent: #FFFFFF;

  /* ---- lines ------------------------------------------------- */
  --line:        rgba(10, 10, 11, 0.08);
  --line-strong: rgba(10, 10, 11, 0.14);

  /* ---- brand ------------------------------------------------- */
  --accent:        #0E9F6E;
  --accent-hover:  #0C8A5F;
  --accent-press:  #0A7451;
  --accent-soft:   #ECFDF5;
  --accent-line:   rgba(14, 159, 110, 0.24);
  --accent-glow:   rgba(14, 159, 110, 0.16);

  /* ---- data series (validated set) --------------------------- */
  --series-1: #0E9F6E;
  --series-2: #2A78D6;
  --series-3: #EB6834;
  --series-4: #4A3AA7;

  /* ---- chart chrome ------------------------------------------ */
  --grid:     rgba(10, 10, 11, 0.07);
  --axis:     rgba(10, 10, 11, 0.16);
  --axis-ink: #8E8E93;

  /* ---- status (fixed, never themed as series) ---------------- */
  --good:     #0CA30C;
  --warning:  #FAB219;
  --serious:  #EC835A;
  --critical: #D03B3B;
  --good-soft:     rgba(12, 163, 12, 0.10);
  --warning-soft:  rgba(250, 178, 25, 0.14);
  --serious-soft:  rgba(236, 131, 90, 0.14);
  --critical-soft: rgba(208, 59, 59, 0.10);
  /* Text-safe deltas — the status steps above are tuned for fills, not type. */
  --delta-up:   #006300;
  --delta-down: #B02020;

  /* ---- depth ------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(10, 10, 11, 0.04);
  --shadow-sm: 0 1px 2px rgba(10, 10, 11, 0.04), 0 2px 6px rgba(10, 10, 11, 0.04);
  --shadow-md: 0 2px 4px rgba(10, 10, 11, 0.03), 0 8px 24px rgba(10, 10, 11, 0.06);
  --shadow-lg: 0 4px 8px rgba(10, 10, 11, 0.04), 0 24px 56px rgba(10, 10, 11, 0.10);
  --shadow-accent: 0 2px 8px rgba(14, 159, 110, 0.24);

  /* ---- radii ------------------------------------------------- */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-full: 999px;

  /* ---- type -------------------------------------------------- */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-display: 2.125rem;
  --t-h1:      1.5rem;
  --t-h2:      1.125rem;
  --t-h3:      0.9375rem;
  --t-body:    0.875rem;
  --t-sm:      0.8125rem;
  --t-xs:      0.75rem;
  --t-micro:   0.6875rem;

  /* ---- space ------------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px;

  --sidebar-w: 244px;
  --rail-w:    340px;

  /* ---- motion ------------------------------------------------
     One easing curve for entrances so the whole app moves as a
     single object. Expo-out: fast start, long soft settle. */
  --ease:      cubic-bezier(0.16, 1, 0.30, 1);
  --ease-in:   cubic-bezier(0.55, 0, 0.55, 0.2);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-1: 140ms;
  --dur-2: 240ms;
  --dur-3: 420ms;
  --dur-4: 640ms;
}

/* ============================================================
   DARK
   Declared under both scopes: the media query follows the OS,
   the [data-theme] attribute follows the in-app toggle and must
   win in both directions.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;

    --page:       #0B0B0C;
    --surface:    #16171A;
    --surface-2:  #1D1E22;
    --surface-3:  #24252A;
    --glass:      rgba(22, 23, 26, 0.72);
    --glass-line: rgba(255, 255, 255, 0.07);

    --text:    #FAFAFA;
    --text-2:  #A1A1AA;
    --text-3:  #8B8B94;

    --line:        rgba(255, 255, 255, 0.09);
    --line-strong: rgba(255, 255, 255, 0.16);

    --accent:       #12A87A;
    --accent-hover: #16BC89;
    --accent-press: #0F9068;
    --accent-soft:  rgba(18, 168, 122, 0.14);
    --accent-line:  rgba(18, 168, 122, 0.32);
    --accent-glow:  rgba(18, 168, 122, 0.22);

    --series-1: #12A87A;
    --series-2: #3987E5;
    --series-3: #D95926;
    --series-4: #9085E9;

    --grid:     rgba(255, 255, 255, 0.07);
    --axis:     rgba(255, 255, 255, 0.16);
    --axis-ink: #8E8E93;

    --delta-up:   #0CA30C;
    --delta-down: #E66767;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.32);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.34), 0 2px 6px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.30), 0 8px 24px rgba(0, 0, 0, 0.40);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.34), 0 24px 56px rgba(0, 0, 0, 0.56);
    --shadow-accent: 0 2px 12px rgba(18, 168, 122, 0.30);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --page:       #0B0B0C;
  --surface:    #16171A;
  --surface-2:  #1D1E22;
  --surface-3:  #24252A;
  --glass:      rgba(22, 23, 26, 0.72);
  --glass-line: rgba(255, 255, 255, 0.07);

  --text:    #FAFAFA;
  --text-2:  #A1A1AA;
  --text-3:  #8B8B94;

  --line:        rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);

  --accent:       #12A87A;
  --accent-hover: #16BC89;
  --accent-press: #0F9068;
  --accent-soft:  rgba(18, 168, 122, 0.14);
  --accent-line:  rgba(18, 168, 122, 0.32);
  --accent-glow:  rgba(18, 168, 122, 0.22);

  --series-1: #12A87A;
  --series-2: #3987E5;
  --series-3: #D95926;
  --series-4: #9085E9;

  --grid:     rgba(255, 255, 255, 0.07);
  --axis:     rgba(255, 255, 255, 0.16);
  --axis-ink: #8E8E93;

  --delta-up:   #0CA30C;
  --delta-down: #E66767;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.32);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.34), 0 2px 6px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.30), 0 8px 24px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.34), 0 24px 56px rgba(0, 0, 0, 0.56);
  --shadow-accent: 0 2px 12px rgba(18, 168, 122, 0.30);
}

/* People who ask for less motion get less motion — everywhere, once. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}