/*
 * GraphX Manage — design tokens
 * Copied from DESIGN_SYSTEM.md §1 (verbatim values). Dark is the default (:root);
 * [data-theme="light"] on <html> overrides the light set. Only tokens this
 * prototype actually consumes are included — see DESIGN_SYSTEM.md for the full set
 * (proofing/annotation/pagebox tokens etc. are out of scope for Product Catalog screens).
 */

:root {
  /* Tell the browser to render native controls (select popups, scrollbars,
     checkboxes, the caret) in the dark scheme — without this, an un-declared
     color-scheme makes Chrome draw the <select> option list on a white popup,
     leaving the near-white option text unreadable. Flipped in [data-theme="light"]. */
  color-scheme: dark;

  /* brand primitives (theme-invariant) */
  --graphx-cyan: #00ffff;
  --graphx-navy: #0e1230;
  --graphx-magenta-violet: #d42bff;
  --graphx-blue: #659aff;
  --graphx-slate: #4c5968;
  --graphx-white: #ffffff;
  --navy: var(--graphx-navy);
  --magenta: var(--graphx-magenta-violet);
  --slate: var(--graphx-slate);
  --white: var(--graphx-white);
  --grad: linear-gradient(100deg, var(--graphx-cyan) 0%, var(--graphx-blue) 50%, var(--graphx-magenta-violet) 100%);

  /* working / secondary accents (theme-aware — dark values here) */
  --cyan: var(--graphx-cyan);
  --blue: var(--graphx-blue);

  /* status accents */
  --amber: #f59e0b;
  --yellow: #eab308;
  --green: #22c55e;

  /* surfaces */
  --canvas: #0b0f28;
  --sidebar: #080b20;
  --panel: rgba(255,255,255,.035);
  --panel-2: rgba(255,255,255,.055);
  --line: rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.14);

  /* text */
  --ink: #eef1fb;
  --ink-dim: rgba(238,241,251,.66);
  --ink-mut: rgba(238,241,251,.42);
  --ink-strong: #ffffff;
  --pager-cur-text: #ffffff;

  /* type + spacing + radius */
  --font-ui: "Montserrat", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-display: "Montserrat", system-ui, sans-serif;
  --radius: 14px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --label-fs: 10.5px;
  --hint-fs: 11.5px;

  /* semantic status families */
  --ok-bg: rgba(62,240,176,.16);   --ok-text: #5ef0bf;   --ok-border: rgba(62,240,176,.4);
  --info-bg: rgba(101,154,255,.16); --info-text: #8fb4ff; --info-border: rgba(101,154,255,.4);
  --warn-bg: rgba(245,201,168,.16); --warn-text: #f5c9a8; --warn-border: rgba(245,201,168,.4);
  --danger-bg: rgba(240,191,208,.16); --danger-text: #f0bfd0; --danger-border: rgba(240,191,208,.4);
  --active-bg: rgba(0,255,255,.14); --active-text: var(--cyan); --active-border: rgba(0,255,255,.36);
  --overdue-bg: rgba(214,69,69,.22); --overdue-text: #f2a0a0; --overdue-border: rgba(214,69,69,.45);
  --neutral-bg: rgba(255,255,255,.07); --neutral-text: var(--ink-mut); --neutral-border: var(--line);

  /* chrome */
  --accent: var(--cyan);
  --accent-blue: var(--blue);
  --accent-magenta: var(--magenta);
  --title-accent: #9fd4ff;
  --topbar-bg: rgba(11,15,40,.82);
  --modal-bg: var(--navy);
  --overlay: rgba(8,11,32,.7);
  --focus-ring: rgba(0,255,255,.1);
  --blue-ink: #8fb4ff;
  --tan-text: #d9c9a0;
  --slate-ink: #b7c0cd;

  /* component tokens */
  --button-radius: 10px;
  --button-padding-y: 9px;
  --button-padding-x: 16px;
  --button-min-height: 38px;
  --button-font-size: 13px;
  --button-font-weight: 600;
  --card-radius: var(--radius);
  --card-padding: 20px;
  --nav-width: 248px;
  --nav-item-radius: 10px;
  --badge-radius: 999px;
  --badge-padding: 3px 10px;
}

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

  --cyan: #006a78;
  --blue: #2f5fd0;

  --amber: #b45309;
  --yellow: #a16207;
  --green: #15803d;

  --canvas: #f3f5fa;
  --panel: #ffffff;
  --panel-2: #f6f8fd;
  --line: rgba(14,18,48,.10);
  --line-2: rgba(14,18,48,.17);

  --ink: #1a2036;
  --ink-dim: rgba(26,32,54,.72);
  --ink-mut: rgba(26,32,54,.65);
  --ink-strong: #10142b;
  --pager-cur-text: var(--ink-strong);

  --ok-bg: rgba(16,154,106,.13); --ok-text: #0b7a4f; --ok-border: rgba(16,154,106,.38);
  --info-bg: rgba(47,95,208,.11); --info-text: #2f5fd0; --info-border: rgba(47,95,208,.35);
  --warn-bg: rgba(217,140,42,.14); --warn-text: #9a5b13; --warn-border: rgba(217,140,42,.40);
  --danger-bg: rgba(214,51,108,.10); --danger-text: #b3264f; --danger-border: rgba(214,51,108,.35);
  --active-bg: rgba(0,151,167,.10); --active-text: #007a8a; --active-border: rgba(0,151,167,.35);
  --overdue-bg: rgba(214,69,69,.12); --overdue-text: #c22030; --overdue-border: rgba(214,69,69,.40);
  --neutral-bg: rgba(14,18,48,.06); --neutral-text: rgba(26,32,54,.65); --neutral-border: rgba(14,18,48,.14);

  --accent: var(--cyan);
  --accent-blue: var(--blue);
  --accent-magenta: #9c1ed1;
  --title-accent: #1e4fbd;
  --topbar-bg: rgba(255,255,255,.85);
  --modal-bg: #ffffff;
  --overlay: rgba(14,18,48,.45);
  --focus-ring: rgba(0,151,167,.18);
  --blue-ink: #2f5fd0;
  --tan-text: #7a6a2e;
  --slate-ink: var(--slate);
}

/* sidebar stays the dark navy brand rail in both themes (DESIGN_SYSTEM.md §1.9) */
:root[data-theme="light"] .sidebar {
  color-scheme: dark;
  --ink: #eef1fb;
  --ink-dim: rgba(238,241,251,.66);
  --ink-mut: rgba(238,241,251,.42);
  --line: rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.14);
  --panel: rgba(255,255,255,.035);
  --panel-2: rgba(255,255,255,.055);
  --cyan: #00ffff;
  --blue: #659aff;
  --blue-ink: #8fb4ff;
  --accent: var(--cyan);
  --active-text: var(--cyan);
}
