/* CITADEL theme tokens: System (follows the OS), Light, Dark, Midnight and Blue.
   Shared by the public site and the dashboard. */

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --max: 1200px;
  --narrow: 760px;
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* Light (default tokens) */
  --bg: #fbfbfd;
  --bg-alt: #f2f3f7;
  --surface: #ffffff;
  --surface-2: #f5f6fa;
  --border: rgba(15, 20, 35, .09);
  --border-strong: rgba(15, 20, 35, .18);
  --text: #111317;
  --text-2: #565b66;
  --text-3: #868b96;
  --accent: #0a6cff;
  --accent-2: #7a3cf0;
  --accent-soft: rgba(10, 108, 255, .09);
  --accent-ink: #ffffff;
  --grad: linear-gradient(120deg, #0a84ff 0%, #6e44ff 55%, #c13cf0 100%);
  --grad-text: linear-gradient(100deg, #0a6cff 10%, #7a3cf0 60%, #c13cf0 95%);
  --aurora-1: rgba(10, 132, 255, .20);
  --aurora-2: rgba(122, 60, 240, .16);
  --aurora-3: rgba(0, 200, 190, .12);
  --header-bg: rgba(251, 251, 253, .72);
  --shadow-sm: 0 1px 2px rgba(15, 20, 35, .05), 0 1px 1px rgba(15, 20, 35, .03);
  --shadow: 0 8px 30px rgba(15, 20, 35, .07), 0 2px 6px rgba(15, 20, 35, .04);
  --shadow-lg: 0 30px 80px rgba(15, 20, 35, .12), 0 8px 24px rgba(15, 20, 35, .06);
  --ok: #12a150;
  --warn: #c27803;
  --bad: #d92d20;
  --ok-soft: rgba(18, 161, 80, .1);
  --warn-soft: rgba(194, 120, 3, .1);
  --bad-soft: rgba(217, 45, 32, .09);
  color-scheme: light;
}

/* Dark: applied when the OS prefers dark and no theme is chosen, or when chosen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0b0c10; --bg-alt: #101218; --surface: #14161c; --surface-2: #1a1d25;
    --border: rgba(255, 255, 255, .08); --border-strong: rgba(255, 255, 255, .16);
    --text: #f4f5f8; --text-2: #a6abb7; --text-3: #737986;
    --accent: #3d9bff; --accent-2: #a17bff; --accent-soft: rgba(61, 155, 255, .13); --accent-ink: #ffffff;
    --grad: linear-gradient(120deg, #2f8fff 0%, #7d5bff 55%, #d158ff 100%);
    --grad-text: linear-gradient(100deg, #5fb0ff 10%, #a38bff 55%, #e08bff 95%);
    --aurora-1: rgba(47, 143, 255, .22); --aurora-2: rgba(125, 91, 255, .2); --aurora-3: rgba(0, 210, 200, .1);
    --header-bg: rgba(11, 12, 16, .7);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 10px 30px rgba(0, 0, 0, .35); --shadow-lg: 0 30px 80px rgba(0, 0, 0, .55);
    --ok: #34d399; --warn: #fbbf24; --bad: #f87171;
    --ok-soft: rgba(52, 211, 153, .12); --warn-soft: rgba(251, 191, 36, .12); --bad-soft: rgba(248, 113, 113, .12);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b0c10; --bg-alt: #101218; --surface: #14161c; --surface-2: #1a1d25;
  --border: rgba(255, 255, 255, .08); --border-strong: rgba(255, 255, 255, .16);
  --text: #f4f5f8; --text-2: #a6abb7; --text-3: #737986;
  --accent: #3d9bff; --accent-2: #a17bff; --accent-soft: rgba(61, 155, 255, .13); --accent-ink: #ffffff;
  --grad: linear-gradient(120deg, #2f8fff 0%, #7d5bff 55%, #d158ff 100%);
  --grad-text: linear-gradient(100deg, #5fb0ff 10%, #a38bff 55%, #e08bff 95%);
  --aurora-1: rgba(47, 143, 255, .22); --aurora-2: rgba(125, 91, 255, .2); --aurora-3: rgba(0, 210, 200, .1);
  --header-bg: rgba(11, 12, 16, .7);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 10px 30px rgba(0, 0, 0, .35); --shadow-lg: 0 30px 80px rgba(0, 0, 0, .55);
  --ok: #34d399; --warn: #fbbf24; --bad: #f87171;
  --ok-soft: rgba(52, 211, 153, .12); --warn-soft: rgba(251, 191, 36, .12); --bad-soft: rgba(248, 113, 113, .12);
  color-scheme: dark;
}
/* Midnight: true black with brighter, cooler accents. */
:root[data-theme="midnight"] {
  --bg: #000000; --bg-alt: #05060a; --surface: #0a0b10; --surface-2: #10121a;
  --border: rgba(140, 170, 255, .1); --border-strong: rgba(140, 170, 255, .22);
  --text: #eef2ff; --text-2: #9aa3c0; --text-3: #69718c;
  --accent: #5ee1ff; --accent-2: #b28dff; --accent-soft: rgba(94, 225, 255, .1); --accent-ink: #00141a;
  --grad: linear-gradient(120deg, #22d3ee 0%, #818cf8 55%, #e879f9 100%);
  --grad-text: linear-gradient(100deg, #67e8f9 5%, #a5b4fc 55%, #f0abfc 95%);
  --aurora-1: rgba(34, 211, 238, .2); --aurora-2: rgba(129, 140, 248, .2); --aurora-3: rgba(232, 121, 249, .12);
  --header-bg: rgba(0, 0, 0, .65);
  --shadow-sm: 0 0 0 1px rgba(140, 170, 255, .06); --shadow: 0 0 0 1px rgba(140, 170, 255, .08), 0 20px 50px rgba(0, 0, 0, .8);
  --shadow-lg: 0 0 0 1px rgba(140, 170, 255, .1), 0 40px 100px rgba(0, 0, 0, .9);
  --ok: #4ade80; --warn: #facc15; --bad: #fb7185;
  --ok-soft: rgba(74, 222, 128, .1); --warn-soft: rgba(250, 204, 21, .1); --bad-soft: rgba(251, 113, 133, .1);
  color-scheme: dark;
}
/* Blue: deep navy surfaces with an all-blue accent and gradient. */
:root[data-theme="blue"] {
  --bg: #071226; --bg-alt: #0a1830; --surface: #0e1d39; --surface-2: #132545;
  --border: rgba(120, 170, 255, .12); --border-strong: rgba(120, 170, 255, .26);
  --text: #eaf2ff; --text-2: #a3b6d6; --text-3: #6f84a8;
  --accent: #4da3ff; --accent-2: #7cc4ff; --accent-soft: rgba(77, 163, 255, .14); --accent-ink: #ffffff;
  --grad: linear-gradient(120deg, #1e6bff 0%, #3b9dff 55%, #6fd3ff 100%);
  --grad-text: linear-gradient(100deg, #6fb6ff 10%, #8fd0ff 55%, #b5e6ff 95%);
  --aurora-1: rgba(30, 107, 255, .26); --aurora-2: rgba(59, 157, 255, .2); --aurora-3: rgba(111, 211, 255, .12);
  --header-bg: rgba(7, 18, 38, .72);
  --shadow-sm: 0 1px 2px rgba(0, 8, 30, .45); --shadow: 0 10px 30px rgba(0, 8, 30, .45); --shadow-lg: 0 30px 80px rgba(0, 8, 30, .6);
  --ok: #34d399; --warn: #fbbf24; --bad: #f87171;
  --ok-soft: rgba(52, 211, 153, .12); --warn-soft: rgba(251, 191, 36, .12); --bad-soft: rgba(248, 113, 113, .12);
  color-scheme: dark;
}