/* Hetnet Studio — shared semantic design tokens
   Cyan Signal: cool slate grounds, single cyan accent, sans-forward UI
   with Instrument Serif reserved for the wordmark. */

:root,
html.dark {
  color-scheme: dark;

  --bg: #0b1220;
  --bg-elevated: #111827;
  --bg-card: #151d2e;
  --bg-hover: #1a2438;

  --border: #243044;
  --border-subtle: #1a2438;

  --rule: #243044;
  --rule-strong: #334155;

  --text: #e8eef7;
  --text-muted: #94a3b8;
  --text-dim: #64748b;

  --danger: #fb7185;
  --warning: #fbbf24;

  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 14px;

  --shadow: 0 18px 40px -20px rgba(2, 8, 23, 0.85);

  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font: var(--sans);
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --measure: 62ch;
  --measure-narrow: 46ch;

  --sidebar-w: 280px;
  --header-h: 64px;
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);

  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(148, 163, 184, 0.12);
  --header-bg: rgba(11, 18, 32, 0.92);
  --grid-line: rgba(148, 163, 184, 0.06);
  --nav-scrolled: rgba(11, 18, 32, 0.96);
  --overlay: rgba(2, 8, 23, 0.88);
}

html.light {
  color-scheme: light;

  --bg: #f1f5f9;
  --bg-elevated: #ffffff;
  --bg-card: #ffffff;
  --bg-hover: #e2e8f0;

  --border: #cbd5e1;
  --border-subtle: #e2e8f0;

  --rule: #cbd5e1;
  --rule-strong: #94a3b8;

  --text: #0f172a;
  --text-muted: #475569;
  --text-dim: #64748b;

  --danger: #e11d48;
  --warning: #b45309;

  --shadow: 0 18px 40px -24px rgba(15, 23, 42, 0.25);

  --glass-bg: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(15, 23, 42, 0.1);
  --header-bg: rgba(241, 245, 249, 0.93);
  --grid-line: rgba(15, 23, 42, 0.05);
  --nav-scrolled: rgba(241, 245, 249, 0.97);
  --overlay: rgba(15, 23, 42, 0.6);
}

/* ── Accents ──────────────────────────────────────────────────────────────
   Cyan is the default (Cyan Signal). Vermilion, indigo, and emerald remain
   available via explicit data-accent attributes. */

html.dark[data-accent="cyan"],
html.dark:not([data-accent]) {
  --accent: #22d3ee;
  --accent-hover: #67e8f9;
  --accent-muted: rgba(34, 211, 238, 0.12);
}

html.light[data-accent="cyan"],
html.light:not([data-accent]) {
  --accent: #0891b2;
  --accent-hover: #0e7490;
  --accent-muted: rgba(8, 145, 178, 0.1);
}

html.dark[data-accent="vermilion"] {
  --accent: #e8705f;
  --accent-hover: #f2907f;
  --accent-muted: rgba(232, 112, 95, 0.14);
}

html.light[data-accent="vermilion"] {
  --accent: #a3241a;
  --accent-hover: #c33325;
  --accent-muted: rgba(163, 36, 26, 0.1);
}

html.dark[data-accent="indigo"] {
  --accent: #8b90f5;
  --accent-hover: #a5a9f8;
  --accent-muted: rgba(139, 144, 245, 0.14);
}

html.light[data-accent="indigo"] {
  --accent: #4338ca;
  --accent-hover: #4f46e5;
  --accent-muted: rgba(67, 56, 202, 0.1);
}

html.dark[data-accent="emerald"] {
  --accent: #4ade80;
  --accent-hover: #86efac;
  --accent-muted: rgba(74, 222, 128, 0.14);
}

html.light[data-accent="emerald"] {
  --accent: #047857;
  --accent-hover: #059669;
  --accent-muted: rgba(4, 120, 87, 0.1);
}