/* Design tokens shared by every page. The dashboard look is the reference; the light
   palette is applied by the dashboard theme toggle (body.theme-light). */
:root {
  --bg: #08111f;
  --bg2: #0e1b31;
  --bg3: #152644;
  --bg4: #1e3460;
  --border: #233759;
  --text: #eff5ff;
  --text2: #93a8c6;
  --blue: #46a6ff;
  --teal: #63e1b8;
  --green: #4ed49a;
  --red: #ff6b6b;
  --yellow: #ffca67;
  --purple: #78a4ff;

  --accent-gradient: linear-gradient(135deg, var(--blue), var(--teal));
  --panel-glow: linear-gradient(135deg, rgba(70, 166, 255, 0.16), rgba(78, 212, 154, 0.08));
  --page-bg:
    radial-gradient(circle at top left, rgba(70, 166, 255, 0.18), transparent 34%),
    radial-gradient(circle at 85% 15%, rgba(78, 212, 154, 0.08), transparent 24%),
    linear-gradient(180deg, #09111e 0%, var(--bg) 100%);
  --shadow-lg: 0 26px 60px rgba(0, 0, 0, 0.34);
  --shadow-md: 0 18px 36px rgba(0, 0, 0, 0.22);
  --card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015));
  --header-tint: linear-gradient(135deg, rgba(70, 166, 255, 0.14), rgba(78, 212, 154, 0.05));

  /* Buttons 12px, small panels 16px, cards and page headers 20px - as in the dashboard. */
  --radius: 12px;
  --radius-card: 16px;
  --radius-panel: 20px;

  --font: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, 'SF Mono', monospace;
}

body.theme-light {
  --bg: #f2f6fb;
  --bg2: #ffffff;
  --bg3: #edf3fb;
  --bg4: #dfe9f7;
  --border: #cfdbef;
  --text: #132238;
  --text2: #5f7290;
  --blue: #1270d8;
  /* Darker than the dark-theme hues so text in these colors passes 4.5:1 on white. */
  --green: #13785a;
  --red: #c53030;
  --yellow: #8f5e00;
  --purple: #366ac8;

  --panel-glow: linear-gradient(135deg, rgba(18, 112, 216, 0.12), rgba(25, 143, 99, 0.05));
  --page-bg: linear-gradient(180deg, #f7faff 0%, var(--bg) 100%);
  --card-bg: var(--bg2);
  --header-tint: linear-gradient(135deg, rgba(18, 112, 216, 0.1), rgba(25, 143, 99, 0.04));
  --shadow-lg: 0 26px 60px rgba(25, 39, 64, 0.14);
  --shadow-md: 0 14px 28px rgba(25, 39, 64, 0.09);
}