/* WebKrown tokens, compiled from tokens.json (Day first, Night second) */
:root, [data-theme="light"] {
  --canvas: #f6f5fb;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunk: #eeecf6;
  --ink: #07060f;
  --ink-2: #46435a;
  --ink-3: #6b6784;
  --ink-inverse: #f3f1fa;
  --line: #e3e0ee;
  --line-strong: #c9c4db;
  --field-line: #8a85a3;
  --accent: #3402fb;
  --accent-hover: #2a00d6;
  --accent-soft: #ece8ff;
  --accent-text: #3402fb;
  --on-accent: #ffffff;
  --focus: #3402fb;
  --success: #0a7a45;
  --success-soft: #e3f5ec;
  --warning: #985700;
  --warning-soft: #fff1dc;
  --danger: #c8243a;
  --danger-soft: #fde7ea;
  --info: #0253d6;
  --info-soft: #e5eeff;
  --krown-ink: #00040c;
  --sky: #00affb;
  --crown-blue: #0264fc;
  --krown-indigo: #3402fb;
  --krown-violet: #8003fa;
  --orchid: #ab14fc;
  --magenta: #e819fa;
  --rose: #fc4d7a;
  --ember: #fd8648;
  --amber: #fca047;
  --shadow-sm: 0 1px 2px rgba(20, 12, 60, 0.06), 0 1px 1px rgba(20, 12, 60, 0.04);
  --shadow-md: 0 8px 24px rgba(20, 12, 60, 0.08), 0 2px 6px rgba(20, 12, 60, 0.05);
  --shadow-lg: 0 24px 64px rgba(20, 12, 60, 0.14), 0 8px 20px rgba(20, 12, 60, 0.06);
  --shadow-glow: 0 12px 40px rgba(52, 2, 251, 0.28);
}
[data-theme="dark"] {
  --canvas: #07060f;
  --surface: #100e1a;
  --surface-raised: #181527;
  --surface-sunk: #0c0b15;
  --ink: #f3f1fa;
  --ink-2: #b6b1cc;
  --ink-3: #8b86a6;
  --ink-inverse: #07060f;
  --line: #26223a;
  --line-strong: #3a3556;
  --field-line: #6a6488;
  --accent: #6246ff;
  --accent-hover: #7458ff;
  --accent-soft: #1c1640;
  --accent-text: #a898ff;
  --on-accent: #ffffff;
  --focus: #a898ff;
  --success: #3dd68c;
  --success-soft: #0e2a1e;
  --warning: #f5b94a;
  --warning-soft: #2e2208;
  --danger: #ff6b7f;
  --danger-soft: #34131a;
  --info: #5aa9ff;
  --info-soft: #0e1f3a;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.7), 0 8px 20px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 12px 48px rgba(98, 70, 255, 0.45);
  color-scheme: dark;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
  --dur-reveal: 900ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --container: 1240px;
  --container-text: 680px;
  --gutter: 24px;
  --header-height: 72px;
  --sidebar-width: 264px;
  --bp-sm: 640px;
  --bp-md: 960px;
  --bp-lg: 1280px;
  --control-height: 44px;
  --field-height: 48px;
  --font-display: "Bricolage Grotesque", "Geist", system-ui, sans-serif;
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;
}
.display-hero { font-family: var(--font-display); font-size: 88px; line-height: 0.95; font-weight: 700; letter-spacing: -0.035em; }
.display-xl { font-family: var(--font-display); font-size: 64px; line-height: 1; font-weight: 700; letter-spacing: -0.03em; }
.display-lg { font-family: var(--font-display); font-size: 48px; line-height: 1.05; font-weight: 700; letter-spacing: -0.025em; }
.display-md { font-family: var(--font-display); font-size: 36px; line-height: 1.1; font-weight: 650; letter-spacing: -0.02em; }
.heading-lg { font-family: var(--font-display); font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; }
.heading-md { font-family: var(--font-display); font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.heading-sm { font-family: var(--font-sans); font-size: 18px; line-height: 1.35; font-weight: 600; }
.body-lg { font-family: var(--font-sans); font-size: 18px; line-height: 1.6; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; font-weight: 400; }
.body-sm { font-family: var(--font-sans); font-size: 14px; line-height: 1.55; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 14px; line-height: 1.2; font-weight: 500; }
.caption { font-family: var(--font-sans); font-size: 12px; line-height: 1.45; font-weight: 400; }
.eyebrow { font-family: var(--font-sans); font-size: 12px; line-height: 1.2; font-weight: 500; letter-spacing: 0.14em; }
.editorial { font-family: var(--font-serif); font-size: 88px; line-height: 0.95; font-weight: 400; font-style: italic; }
.code { font-family: var(--font-mono); font-size: 13px; line-height: 1.6; font-weight: 400; }