/* CloudAxian design tokens — RULES.md §3.
 *
 * THIS IS THE ONLY FILE PERMITTED TO CONTAIN RAW COLOR AND SIZE VALUES.
 * Any hex, rgb(), or named color anywhere else is a bug and check_rules.py
 * will fail the build on it.
 *
 * The dark palette is written out twice on purpose: once for the explicit
 * [data-theme="dark"] toggle and once for the system preference. Keep them
 * in sync — tests/test_tokens.py checks every color token is redefined.
 */

:root {
  /* neutral ramp — 12 steps, slate */
  --n-0:  #ffffff;
  --n-1:  #f8fafc;
  --n-2:  #f1f5f9;
  --n-3:  #e2e8f0;
  --n-4:  #cbd5e1;
  --n-5:  #94a3b8;
  --n-6:  #64748b;
  --n-7:  #475569;
  --n-8:  #334155;
  --n-9:  #1e293b;
  --n-10: #0f172a;
  --n-11: #020617;

  /* surfaces and text — light */
  --surface-1: var(--n-0);
  --surface-2: var(--n-1);
  --surface-3: var(--n-2);
  --border-subtle: var(--n-3);   /* separators only — decorative, exempt from 3:1 */
  --border-strong: var(--n-6);   /* control boundaries — MUST clear 3:1 (§7) */
  --text-primary: var(--n-10);
  --text-secondary: var(--n-8);
  --text-muted: var(--n-7);          /* 7.58:1 — comfort, not the 4.5 floor */

  /* one accent hue, interactive affordances only — never decoration */
  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-contrast: #ffffff;

  /* status — always paired with a shape and text, never color alone (§3.5) */
  --status-running: #15803d;
  --status-running-bg: #dcfce7;
  --status-running-border: #86efac;
  --status-stopped: #475569;
  --status-stopped-bg: #e2e8f0;
  --status-stopped-border: #cbd5e1;
  --status-error: #b91c1c;
  --status-error-bg: #fee2e2;
  --status-error-border: #fca5a5;
  --status-warning: #b45309;
  --status-warning-bg: #fef3c7;
  --status-warning-border: #fcd34d;
  --status-pending: #1d4ed8;
  --status-pending-bg: #dbeafe;
  --status-pending-border: #93c5fd;

  /* chart series — validated for CVD separation and >= 3:1 on our surfaces (9.2).
     Distinct from --status-* on purpose: state and series must never share ink. */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --chart-grid: var(--n-3);

  /* spacing — 4px base, ONLY these steps (§3.2) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* type — five sizes at the DEFAULT display scale (§3.3).
     Compact and comfortable override these below; nothing else changes, because
     every component reads its size from a token. */
  --text-micro: 12px;
  --text-body: 14px;
  --text-heading: 16px;
  --text-title: 22px;
  --text-display: 30px;
  /* Auth / marketing brand lockup only — not used in the dense console */
  --text-brand: 40px;
  --leading-prose: 1.5;
  --leading-table: 1.4;

  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --radius-control: 4px;
  --radius-card: 6px;
  --radius-pill: 999px;

  --motion-state: 120ms;
  --motion-entrance: 200ms;
  --easing: ease-out;

  /* shadows are permitted ONLY on dropdown, popover, modal (§3.7) */
  --shadow-float: 0 4px 12px rgb(2 6 23 / 0.12);
  --shadow-raised: 0 1px 2px rgb(2 6 23 / 0.06);

  /* selection is a whisper of accent, not a block of colour: the row's own
     status badges have to stay readable on top of it */
  --surface-selected: #eef1f6;

  /* DataTables paints a selected row with `inset 0 0 0 9999px rgb(var(--dt-row-selected))`,
     so its variables take R,G,B triplets rather than a colour. These are the
     same values as --surface-selected / --text-primary / --accent. */
  --dt-row-selected: 238, 241, 246;
  --dt-row-selected-text: 15, 23, 42;
  --dt-row-selected-link: 79, 70, 229;
  --scrollbar-thumb: #cbd5e1;
  --scrollbar-thumb-hover: #94a3b8;

  --row-padding-y: var(--space-2);
  --layout-sidebar: 248px;
  --layout-min: 1280px;

  /* heights the sticky table stack is measured from, so the offsets are not
     magic numbers scattered through component CSS */
  --layout-toolbar-h: 49px;
  --layout-filterbar-h: 41px;
}

:root[data-bs-theme="dark"] {
  --surface-1: var(--n-10);
  --surface-2: var(--n-11);
  --surface-3: var(--n-9);
  --border-subtle: var(--n-9);
  --border-strong: var(--n-5);
  --text-primary: var(--n-1);
  --text-secondary: var(--n-3);
  --text-muted: var(--n-4);          /* 9.59:1 on the dark surface */

  --accent: #818cf8;
  --accent-hover: #a5b4fc;
  --accent-contrast: #0f172a;

  --status-running: #4ade80;
  --status-running-bg: #052e16;
  --status-running-border: #166534;
  --status-stopped: #94a3b8;
  --status-stopped-bg: #1e293b;
  --status-stopped-border: #334155;
  --status-error: #f87171;
  --status-error-bg: #450a0a;
  --status-error-border: #991b1b;
  --status-warning: #fbbf24;
  --status-warning-bg: #451a03;
  --status-warning-border: #92400e;
  --status-pending: #60a5fa;
  --status-pending-bg: #172554;
  --status-pending-border: #1e40af;

  --series-1: #3987e5;
  --series-2: #d95926;
  --chart-grid: var(--n-8);

  --shadow-float: 0 4px 12px rgb(0 0 0 / 0.5);
  --shadow-raised: 0 1px 2px rgb(0 0 0 / 0.4);

  --surface-selected: #1c2536;
  --dt-row-selected: 28, 37, 54;
  --dt-row-selected-text: 241, 245, 249;
  --dt-row-selected-link: 129, 140, 248;
  --scrollbar-thumb: #334155;
  --scrollbar-thumb-hover: #475569;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) {
    --surface-1: var(--n-10);
    --surface-2: var(--n-11);
    --surface-3: var(--n-9);
    --border-subtle: var(--n-9);
    --border-strong: var(--n-5);
    --text-primary: var(--n-1);
    --text-secondary: var(--n-4);
    --text-muted: var(--n-5);

    --accent: #818cf8;
    --accent-hover: #a5b4fc;
    --accent-contrast: #0f172a;

    --status-running: #4ade80;
    --status-running-bg: #052e16;
    --status-running-border: #166534;
    --status-stopped: #94a3b8;
    --status-stopped-bg: #1e293b;
    --status-stopped-border: #334155;
    --status-error: #f87171;
    --status-error-bg: #450a0a;
    --status-error-border: #991b1b;
    --status-warning: #fbbf24;
    --status-warning-bg: #451a03;
    --status-warning-border: #92400e;
    --status-pending: #60a5fa;
    --status-pending-bg: #172554;
    --status-pending-border: #1e40af;

    --series-1: #3987e5;
    --series-2: #d95926;
    --chart-grid: var(--n-8);

    --shadow-float: 0 4px 12px rgb(0 0 0 / 0.5);
    --shadow-raised: 0 1px 2px rgb(0 0 0 / 0.4);

    --surface-selected: #1c2536;
    --dt-row-selected: 28, 37, 54;
    --dt-row-selected-text: 241, 245, 249;
    --dt-row-selected-link: 129, 140, 248;
    --scrollbar-thumb: #334155;
    --scrollbar-thumb-hover: #475569;
  }
}

/* ---------------------------------------------------------- display scale
 * One layout at three densities, chosen by the viewer and remembered. This is
 * deliberately NOT two designs: a second layout doubles every screen, every
 * test and every review forever, and one of the two always rots. Scaling the
 * type and row rhythm gives the same result where it matters — how much fits
 * on screen and how hard it is to read — for a handful of token overrides.
 */
:root[data-display="compact"] {
  --text-micro: 11px;
  --text-body: 13px;
  --text-heading: 15px;
  --text-title: 20px;
  --text-display: 28px;
  --text-brand: 36px;
  --leading-prose: 1.45;
  --leading-table: 1.3;
  --row-padding-y: var(--space-1);
}

:root[data-display="comfortable"] {
  --text-micro: 13px;
  --text-body: 15px;
  --text-heading: 17px;
  --text-title: 24px;
  --text-display: 32px;
  --text-brand: 44px;
  --leading-prose: 1.6;
  --leading-table: 1.5;
  --row-padding-y: var(--space-3);
}