/* Sidis color tokens — Cobalt & Mint.
   Cobalt is structure and Sidis's own voice: bands, beacons, chart actuals.
   Mint is action, and only action: it fills the thing you press.
   Mint carries a DARK label — it cannot hold white text at any usable saturation,
   so text and icons in the action colour use --color-primary-ink, never --color-primary. */

:root {
  /* Base ramp — mist neutrals (cool, cobalt-leaning) */
  --mist-50: #F7F8FC;
  --mist-100: #F2F4FB;
  --mist-200: #E3E6F2;
  --mist-300: #CDD3EA;
  --mist-400: #616A88;
  --mist-600: #4B5578;
  --white: #FFFFFF;

  /* Base ramp — cobalt (structure) */
  --cobalt-100: #E7EAFB;
  --cobalt-300: #7C8DE8;
  --cobalt-500: #2440C8;
  --cobalt-600: #1C34A8;
  --cobalt-700: #1B2A73;
  --cobalt-800: #101A4A;
  --cobalt-900: #0A1130;
  --cobalt-ink: #10173A;
  --cobalt-sunken-dark: #142359;
  --cobalt-border: #2A3570;
  --cobalt-border-strong: #3B4894;
  --ink-dark: #EEF1FC;
  --ink-dark-secondary: #AEB7E0;
  --ink-dark-muted: #7E88C0;

  /* Base ramp — mint (action) */
  --mint-100: #DAF6EB;
  --mint-300: #7FE7C0;
  --mint-400: #2AD3A2;
  --mint-500: #20C295;
  --mint-700: #07614A;
  --mint-800: #054A38;
  --mint-950: #062A20;
  --mint-tint-dark: #0E3A2A;
  --mint-ink-dark: #BCEDDC;

  /* Semantic base ramps */
  --green-500: #10996B;
  --green-100: #DAF6EB;
  --green-900: #07614A;
  --amber-500: #C97A0A;
  --amber-100: #FBEBD2;
  --amber-900: #7A4A00;
  --red-500: #D23A22;
  --red-100: #FBE3E0;
  --red-900: #9E2A1A;

  /* ---- Semantic aliases: light theme (default) ---- */
  --color-bg: var(--mist-50);
  --color-surface: var(--white);
  --color-surface-sunken: var(--mist-100);

  --color-ink: var(--cobalt-ink);
  --color-text-secondary: var(--mist-600);
  --color-text-muted: var(--mist-400);
  /* Label on a mint fill — dark, never white */
  --color-text-on-primary: var(--mint-950);

  --color-border: var(--mist-200);
  --color-border-strong: var(--mist-300);

  --color-primary: var(--mint-400);
  --color-primary-hover: var(--mint-500);
  /* Action colour as a FOREGROUND: links, ghost buttons, icons, active nav */
  --color-primary-ink: var(--mint-700);
  --color-primary-ink-hover: var(--mint-800);
  --color-primary-tint: var(--mint-100);
  --color-primary-tint-ink: var(--mint-700);
  /* Row hover / selection: primary tint at 50% */
  --color-row-hover: rgba(218, 246, 235, 0.5);

  /* Structure — bands, section grounds, brand chrome. Never clickable. */
  --color-structure: var(--cobalt-500);
  --color-structure-hover: var(--cobalt-600);
  --color-structure-ink: var(--white);
  --color-structure-tint: var(--cobalt-100);

  /* Beacon — where Sidis tells you something it worked out */
  --color-beacon: var(--cobalt-500);
  --color-beacon-tint: var(--cobalt-100);
  --color-beacon-ink: var(--cobalt-800);

  --color-success: var(--green-500);
  --color-success-tint: var(--green-100);
  --color-success-ink: var(--green-900);
  --color-warning: var(--amber-500);
  --color-warning-tint: var(--amber-100);
  --color-warning-ink: var(--amber-900);
  --color-danger: var(--red-500);
  --color-danger-tint: var(--red-100);
  --color-danger-ink: var(--red-900);

  /* Chart series — 1 actual, 2 forecast, 3 par line, 4/5 extra series */
  --chart-1: #2440C8;
  --chart-2: #2AD3A2;
  --chart-3: #616A88;
  --chart-4: #6E7BE8;
  --chart-5: #0FA3A3;

  --color-focus-ring: rgba(36, 64, 200, 0.35);
}

/* ---- Semantic aliases: dark theme ---- */
[data-theme="dark"] {
  --color-bg: var(--cobalt-900);
  --color-surface: var(--cobalt-800);
  --color-surface-sunken: var(--cobalt-sunken-dark);

  --color-ink: var(--ink-dark);
  --color-text-secondary: var(--ink-dark-secondary);
  --color-text-muted: var(--ink-dark-muted);
  --color-text-on-primary: var(--mint-950);

  --color-border: var(--cobalt-border);
  --color-border-strong: var(--cobalt-border-strong);

  --color-primary: var(--mint-400);
  --color-primary-hover: #4FE3B0;
  --color-primary-ink: var(--mint-300);
  --color-primary-ink-hover: var(--mint-ink-dark);
  --color-primary-tint: var(--mint-tint-dark);
  --color-primary-tint-ink: var(--mint-ink-dark);
  --color-row-hover: rgba(42, 211, 162, 0.12);

  --color-structure: var(--cobalt-300);
  --color-structure-hover: #9FB0F2;
  --color-structure-ink: var(--cobalt-900);
  --color-structure-tint: var(--cobalt-700);

  /* On dark, the beacon reads as mint — cobalt disappears into the surface */
  --color-beacon: var(--mint-400);
  --color-beacon-tint: var(--mint-tint-dark);
  --color-beacon-ink: var(--mint-ink-dark);

  --color-success: #4FE3B0;
  --color-success-tint: #0E3A2A;
  --color-success-ink: #BCEDDC;
  --color-warning: #F5C25A;
  --color-warning-tint: #3A2B0C;
  --color-warning-ink: #F7DFA8;
  --color-danger: #F58B76;
  --color-danger-tint: #3F1B14;
  --color-danger-ink: #F8CFC6;

  --chart-1: #7C8DE8;
  --chart-2: #2AD3A2;
  --chart-3: #7E88C0;
  --chart-4: #9FB0F2;
  --chart-5: #4FD3D3;

  --color-focus-ring: rgba(42, 211, 162, 0.45);
}