:root {
  --font-sans: "Figtree", system-ui, sans-serif;
}

:root,
[data-theme="light"] {
  color-scheme: light;
  --page-bg: #f8fafc;
  --page-grid-color: rgb(15 23 42 / 0.055);
  --page-orange-glow: rgb(249 115 22 / 0.12);
  --page-cyan-glow: rgb(34 211 238 / 0.14);
  --surface: #ffffff;
  --surface-muted: #f1f5f9;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --accent: #c2410c;
  --accent-hover: #9a3412;
  --accent-soft: #fff1e6;
  --accent-soft-border: #fed7aa;
  --accent-text: #c2410c;
  --cyan: #0e7490;
  --cyan-soft: rgb(8 145 178 / 0.08);
  --cyan-border: rgb(8 145 178 / 0.26);
  --header-bg: rgb(255 255 255 / 0.9);
  --field: #ffffff;
  --button-primary-text: #ffffff;
  --page: var(--page-bg);
  --brand: var(--accent);
  --brand-hover: var(--accent-hover);
  --brand-soft: var(--accent-soft);
  --brand-border: var(--accent-soft-border);
}

[data-theme="dark"] {
  color-scheme: dark;
  --page-bg: #0b1220;
  --page-grid-color: rgb(148 163 184 / 0.09);
  --page-orange-glow: rgb(249 115 22 / 0.2);
  --page-cyan-glow: rgb(34 211 238 / 0.16);
  --surface: #111c2e;
  --surface-muted: #152238;
  --text-primary: #e2e8f0;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --border: #27364a;
  --border-strong: #3b4c63;
  --accent: #fb923c;
  --accent-hover: #fdba74;
  --accent-soft: #2b211d;
  --accent-soft-border: #543321;
  --accent-text: #fdba74;
  --cyan: #67e8f9;
  --cyan-soft: rgb(8 145 178 / 0.12);
  --cyan-border: rgb(34 211 238 / 0.34);
  --header-bg: rgb(11 18 32 / 0.9);
  --field: #0b1220;
  --button-primary-text: #0b1220;
}

.brand-logo-dark {
  display: none;
}

[data-theme="dark"] .brand-logo-light {
  display: none;
}

[data-theme="dark"] .brand-logo-dark {
  display: block;
}

.brand-grid-background {
  background-color: var(--page-bg);
  background-image:
    radial-gradient(ellipse at 12% 0%, var(--page-orange-glow), transparent 38rem),
    radial-gradient(ellipse at 84% 18%, var(--page-cyan-glow), transparent 34rem),
    linear-gradient(var(--page-grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--page-grid-color) 1px, transparent 1px);
  background-attachment: fixed;
  background-size: auto, auto, 42px 42px, 42px 42px;
}

.brand-header-surface,
.site-header,
.navbar {
  background-color: var(--header-bg);
  border-color: var(--border);
  backdrop-filter: blur(8px);
}