/* Cloudfonica 2.3 Cloud-Glass Design Tokens & Self-Hosted Variable Fonts.
   Atmospheric Cloud-Ice (#f4f7fc) & Deep Cloud Obsidian (#070b14) neutrals + Specular Glass tokens.
   Light is default; Dark applies via <html data-theme="dark"> or OS prefers-color-scheme: dark. */

@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Variable.woff2") format("woff2-variations"),
       url("../fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Variable.woff2") format("woff2-variations"),
       url("../fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

:root, [data-theme="light"] {
  --navy-50: #eef0f8;
  --navy-100: #dde1f2;
  --navy-200: #bcc4ea;
  --navy-300: #8ea2ff;
  --navy-400: #6573c4;
  --navy-500: #3a4a9a;
  --navy-600: #283782;
  --navy-700: #212d6b;
  --navy-800: #1b2456;
  --navy-900: #161c42;
  --navy-950: #0c1028;
  --teal-50: #e8f3f7;
  --teal-100: #dcedf3;
  --teal-200: #b4dcea;
  --teal-300: #6cc0de;
  --teal-500: #347a98;
  --teal-600: #236680;
  --teal-700: #1b5266;
  --amber-100: #fdf3e2;
  --amber-400: #ffb84a;
  --amber-500: #f5a524;
  --amber-700: #9a6200;
  --red-100: #fdeceb;
  --red-200: #ffaba3;
  --red-300: #ff8f85;
  --red-600: #b42318;
  --red-700: #93190f;
  --gray-0: #ffffff;
  --gray-50: #f4f7fc;
  --gray-100: #eaf0f8;
  --gray-150: #dfe7f3;
  --gray-200: #d0dceb;
  --gray-250: #c1cfe2;
  --gray-300: #aebfd6;
  --gray-400: #7b8fa8;
  --gray-500: #55667d;
  --gray-600: #3d4d63;
  --gray-650: #324156;
  --gray-700: #283548;
  --gray-800: #182232;
  --gray-850: #11192b;
  --gray-900: #0d1524;
  --gray-950: #070b14;
  --white: #ffffff;
  --signal: var(--amber-500);
  --signal-hover: var(--amber-400);
  --on-signal: var(--gray-900);
  --bg: #ffffff;
  --bg-subtle: #f4f7fc;
  --bg-raised: #ffffff;
  --bg-hover: #eaf0f8;
  --bg-selected: #e3ecf8;
  --bg-brand: var(--navy-600);
  --border: #dce5f2;
  --border-hover: #c5d3e6;
  --border-strong: #7d91ab;
  --border-disabled: #cbd7e8;
  --text: #0d1524;
  --text-muted: #47586e;
  --text-subtle: #5a6b82;
  --text-on-brand: var(--white);
  --brand: var(--navy-600);
  --brand-mark: var(--navy-600);
  --accent: var(--teal-500);
  --accent-text: var(--teal-600);
  --accent-subtle: var(--teal-100);
  --accent-soft: rgba(52, 122, 152, 0.12);
  --primary: var(--navy-600);
  --primary-hover: var(--navy-500);
  --on-primary: var(--white);
  --signal-text: var(--amber-700);
  --success: var(--teal-600);
  --success-subtle: var(--teal-50);
  --info: var(--navy-600);
  --info-subtle: var(--gray-100);
  --warning: var(--amber-700);
  --warning-subtle: var(--amber-100);
  --danger: var(--red-600);
  --danger-hover: var(--red-700);
  --on-danger: var(--white);
  --danger-subtle: var(--red-100);
  --scrim: rgba(7, 11, 20, 0.52);
  --glass-bg: rgba(255, 255, 255, 0.56);
  --glass-bg-strong: rgba(255, 255, 255, 0.84);
  --glass-bg-nav: rgba(255, 255, 255, 0.85);
  --glass-row-bg: rgba(255, 255, 255, 0.48);
  --glass-well-bg: rgba(15, 25, 50, 0.05);
  --glass-border: rgba(255, 255, 255, 0.84);
  --glass-outline: rgba(40, 55, 130, 0.15);
  --glass-highlight: rgba(255, 255, 255, 0.95);
  --glass-filter: blur(22px) saturate(180%);
  --glass-filter-strong: blur(28px) saturate(190%);
  --sky-navy: rgba(40, 62, 164, 0.22);
  --sky-teal: rgba(36, 138, 178, 0.20);
  --sky-grid: rgba(40, 55, 130, 0.095);
  --orb-indigo: rgba(56, 82, 214, 0.30);
  --orb-cyan: rgba(34, 158, 204, 0.28);
  --orb-ring: rgba(40, 62, 164, 0.22);
  --brand-pressed: var(--navy-700);
  --focus: var(--navy-600);
  --shadow-sm: 0 1px 2px rgba(13, 21, 36, 0.05), 0 4px 12px -2px rgba(24, 38, 86, 0.06);
  --shadow-md: 0 4px 12px -2px rgba(13, 21, 36, 0.06), 0 14px 32px -8px rgba(24, 38, 86, 0.12);
  --shadow-menu: 0 16px 40px -10px rgba(13, 21, 36, 0.18);
  --shadow-glass: inset 0 1px 0 rgba(255, 255, 255, 0.90), inset 1px 0 0 rgba(255, 255, 255, 0.50), 0 1px 2px rgba(13, 21, 36, 0.06), 0 20px 48px -12px rgba(24, 38, 86, 0.16);
}

[data-theme="dark"] {
  --bg: #070b14;
  --bg-subtle: #0c1220;
  --bg-raised: #11192b;
  --bg-hover: #172238;
  --bg-selected: #1d2b47;
  --bg-brand: var(--navy-900);
  --border: rgba(148, 163, 184, 0.16);
  --border-hover: rgba(148, 163, 184, 0.28);
  --border-strong: #647896;
  --border-disabled: rgba(148, 163, 184, 0.22);
  --text: #f1f5fb;
  --text-muted: #9fb0c7;
  --text-subtle: #8295b0;
  --text-on-brand: #f3f5fb;
  --brand: #8ea2ff;
  --brand-mark: var(--white);
  --accent: var(--teal-300);
  --accent-text: var(--teal-300);
  --accent-subtle: #143246;
  --accent-soft: rgba(108, 192, 222, 0.15);
  --primary: var(--navy-500);
  --primary-hover: #485ab3;
  --on-primary: var(--white);
  --signal-text: var(--amber-500);
  --success: var(--teal-300);
  --success-subtle: #143246;
  --info: #8ea2ff;
  --info-subtle: #172238;
  --warning: var(--amber-500);
  --warning-subtle: #38260c;
  --danger: var(--red-300);
  --danger-hover: var(--red-200);
  --on-danger: var(--navy-950);
  --danger-subtle: #3b1622;
  --scrim: rgba(3, 6, 14, 0.68);
  --glass-bg: rgba(17, 25, 43, 0.54);
  --glass-bg-strong: rgba(15, 23, 40, 0.84);
  --glass-bg-nav: rgba(10, 15, 28, 0.84);
  --glass-row-bg: rgba(255, 255, 255, 0.05);
  --glass-well-bg: rgba(3, 7, 16, 0.44);
  --glass-border: rgba(255, 255, 255, 0.19);
  --glass-outline: rgba(108, 192, 222, 0.20);
  --glass-highlight: rgba(255, 255, 255, 0.20);
  --glass-filter: blur(22px) saturate(180%);
  --glass-filter-strong: blur(28px) saturate(190%);
  --sky-navy: rgba(74, 102, 228, 0.32);
  --sky-teal: rgba(56, 189, 248, 0.22);
  --sky-grid: rgba(130, 165, 255, 0.11);
  --orb-indigo: rgba(82, 112, 255, 0.44);
  --orb-cyan: rgba(56, 189, 248, 0.36);
  --orb-ring: rgba(108, 192, 222, 0.28);
  --brand-pressed: var(--navy-600);
  --focus: #8ea2ff;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 12px -2px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 8px 24px -4px rgba(0, 0, 0, 0.50), 0 18px 40px -10px rgba(0, 0, 0, 0.58);
  --shadow-menu: 0 18px 44px -10px rgba(0, 0, 0, 0.68);
  --shadow-glass: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 1px 0 0 rgba(255, 255, 255, 0.07), 0 24px 56px -12px rgba(0, 0, 0, 0.72);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #070b14;
    --bg-subtle: #0c1220;
    --bg-raised: #11192b;
    --bg-hover: #172238;
    --bg-selected: #1d2b47;
    --bg-brand: var(--navy-900);
    --border: rgba(148, 163, 184, 0.16);
    --border-hover: rgba(148, 163, 184, 0.28);
    --border-strong: #647896;
    --border-disabled: rgba(148, 163, 184, 0.22);
    --text: #f1f5fb;
    --text-muted: #9fb0c7;
    --text-subtle: #8295b0;
    --text-on-brand: #f3f5fb;
    --brand: #8ea2ff;
    --brand-mark: var(--white);
    --accent: var(--teal-300);
    --accent-text: var(--teal-300);
    --accent-subtle: #143246;
    --accent-soft: rgba(108, 192, 222, 0.15);
    --primary: var(--navy-500);
    --primary-hover: #485ab3;
    --on-primary: var(--white);
    --signal-text: var(--amber-500);
    --success: var(--teal-300);
    --success-subtle: #143246;
    --info: #8ea2ff;
    --info-subtle: #172238;
    --warning: var(--amber-500);
    --warning-subtle: #38260c;
    --danger: var(--red-300);
    --danger-hover: var(--red-200);
    --on-danger: var(--navy-950);
    --danger-subtle: #3b1622;
    --scrim: rgba(3, 6, 14, 0.68);
    --glass-bg: rgba(17, 25, 43, 0.54);
    --glass-bg-strong: rgba(15, 23, 40, 0.84);
    --glass-bg-nav: rgba(10, 15, 28, 0.84);
    --glass-row-bg: rgba(255, 255, 255, 0.05);
    --glass-well-bg: rgba(3, 7, 16, 0.44);
    --glass-border: rgba(255, 255, 255, 0.19);
    --glass-outline: rgba(108, 192, 222, 0.20);
    --glass-highlight: rgba(255, 255, 255, 0.20);
    --glass-filter: blur(22px) saturate(180%);
    --glass-filter-strong: blur(28px) saturate(190%);
    --sky-navy: rgba(74, 102, 228, 0.32);
    --sky-teal: rgba(56, 189, 248, 0.22);
    --sky-grid: rgba(130, 165, 255, 0.11);
    --orb-indigo: rgba(82, 112, 255, 0.44);
    --orb-cyan: rgba(56, 189, 248, 0.36);
    --orb-ring: rgba(108, 192, 222, 0.28);
    --brand-pressed: var(--navy-600);
    --focus: #8ea2ff;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 12px -2px rgba(0, 0, 0, 0.40);
    --shadow-md: 0 8px 24px -4px rgba(0, 0, 0, 0.50), 0 18px 40px -10px rgba(0, 0, 0, 0.58);
    --shadow-menu: 0 18px 44px -10px rgba(0, 0, 0, 0.68);
    --shadow-glass: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 1px 0 0 rgba(255, 255, 255, 0.07), 0 24px 56px -12px rgba(0, 0, 0, 0.72);
  }
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --border-width: 1px;
  --focus-width: 2px;
  --container: 1200px;
  --container-text: 680px;
  --container-app: 1280px;
  --sidebar: 248px;
  --topbar: 64px;
  --drawer: 480px;
  --touch-target: 44px;
  --duration-fast: 120ms;
  --duration-base: 160ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --font-sans: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.display { font-family: var(--font-sans); font-size: clamp(32px, 6.2vw, 72px); line-height: 1.04; font-weight: 600; letter-spacing: -0.035em; overflow-wrap: break-word; }
.h1 { font-family: var(--font-sans); font-size: clamp(27px, 4.4vw, 48px); line-height: 1.1; font-weight: 600; letter-spacing: -0.031em; overflow-wrap: break-word; }
.h2 { font-family: var(--font-sans); font-size: clamp(22px, 3.2vw, 32px); line-height: 1.16; font-weight: 600; letter-spacing: -0.023em; overflow-wrap: break-word; }
.h3 { font-family: var(--font-sans); font-size: clamp(18px, 2.2vw, 22px); line-height: 1.3; font-weight: 600; letter-spacing: -0.25px; overflow-wrap: break-word; }
.lede { font-family: var(--font-sans); font-size: clamp(16px, 2vw, 20px); line-height: 1.5; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; font-weight: 400; }
.small { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; font-weight: 400; }
.eyebrow { font-family: var(--font-sans); font-size: 13px; line-height: 1.2; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); }
.label { font-family: var(--font-sans); font-size: 15px; line-height: 1.2; font-weight: 500; }
.page-title { font-family: var(--font-sans); font-size: clamp(20px, 2.8vw, 28px); line-height: 1.2; font-weight: 600; letter-spacing: -0.75px; }
.card-title { font-family: var(--font-sans); font-size: 18px; line-height: 1.35; font-weight: 600; letter-spacing: -0.25px; overflow-wrap: break-word; }
.ui { font-family: var(--font-sans); font-size: 14px; line-height: 1.45; font-weight: 400; }
.column { font-family: var(--font-sans); font-size: 13px; line-height: 1.3; font-weight: 500; }
.caption { font-family: var(--font-sans); font-size: 12px; line-height: 1.35; font-weight: 500; }
.stat { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: clamp(32px, 4.5vw, 56px); line-height: 1; font-weight: 500; letter-spacing: -2px; }
.figure { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: clamp(24px, 3vw, 32px); line-height: 1.1; font-weight: 500; letter-spacing: -1px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 14px; line-height: 1.5; font-weight: 400; }