:root {
  --font-sans: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 14px;
  --space-4: 20px;
  --space-5: 32px;
  --space-6: 44px;
  --space-7: 64px;
  --space-8: 96px;

  --accent: #1e6fe0;
  --accent-strong: #1447b8;
  --accent-soft: #e5f1fd;
  --brand-gradient-start: #1447b8;
  --brand-gradient-end: #28b8e8;
  --brand-gradient: linear-gradient(135deg, var(--brand-gradient-start), var(--brand-gradient-end));
  --danger: #d1403a;
  --danger-soft: #fbe7e6;
  --success: #1f8a52;
  --success-soft: #e4f5ea;
  --warning: #b4790a;
  --warning-soft: #fbf0dc;

  --bg: #f4f8fd;
  --bg-elevated: #ffffff;
  --bg-muted: #eaf1fa;
  --bg-sunken: #e1ecf7;
  --border: #dbe7f4;
  --border-strong: #bdd4ea;
  --text: #121b2e;
  --text-muted: #55627c;
  --text-faint: #8a96ac;

  --shadow-xs: 0 1px 2px rgba(13, 30, 60, 0.06);
  --shadow-sm: 0 2px 8px rgba(13, 30, 60, 0.07), 0 1px 2px rgba(13, 30, 60, 0.06);
  --shadow-md: 0 12px 28px rgba(13, 30, 60, 0.12), 0 2px 6px rgba(13, 30, 60, 0.07);
  --shadow-lg: 0 24px 48px rgba(13, 30, 60, 0.18), 0 4px 12px rgba(13, 30, 60, 0.09);

  --header-h: 76px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a1626;
    --bg-elevated: #10233b;
    --bg-muted: #142a45;
    --bg-sunken: #081321;
    --border: #1f3958;
    --border-strong: #2e4e74;
    --text: #edf3fb;
    --text-muted: #a2b2cb;
    --text-faint: #6d7f9b;
    --accent: #4e9dff;
    --accent-strong: #7cc1f5;
    --accent-soft: #123259;
    --danger-soft: #3a201f;
    --success-soft: #16301f;
    --warning-soft: #352a12;
    --shadow-xs: 0 1px 2px rgba(2, 8, 20, 0.4);
    --shadow-sm: 0 2px 10px rgba(2, 8, 20, 0.4);
    --shadow-md: 0 16px 36px rgba(2, 8, 20, 0.55), 0 2px 8px rgba(2, 8, 20, 0.4);
    --shadow-lg: 0 28px 56px rgba(2, 8, 20, 0.65), 0 4px 16px rgba(2, 8, 20, 0.45);
  }
}

:root[data-theme="dark"] {
  --bg: #0a1626;
  --bg-elevated: #10233b;
  --bg-muted: #142a45;
  --bg-sunken: #081321;
  --border: #1f3958;
  --border-strong: #2e4e74;
  --text: #edf3fb;
  --text-muted: #a2b2cb;
  --text-faint: #6d7f9b;
  --accent: #4e9dff;
  --accent-strong: #7cc1f5;
  --accent-soft: #123259;
  --danger-soft: #3a201f;
  --success-soft: #16301f;
  --warning-soft: #352a12;
  --shadow-xs: 0 1px 2px rgba(2, 8, 20, 0.4);
  --shadow-sm: 0 2px 10px rgba(2, 8, 20, 0.4);
  --shadow-md: 0 16px 36px rgba(2, 8, 20, 0.55), 0 2px 8px rgba(2, 8, 20, 0.4);
  --shadow-lg: 0 28px 56px rgba(2, 8, 20, 0.65), 0 4px 16px rgba(2, 8, 20, 0.45);
}