/* Hawking Discovery Design System — generated from tokens.json */
:root, [data-theme="dark"] {
  --color-space-950: #0f1824;
  --color-space-925: #111b28;
  --color-space-900: #172436;
  --color-space-850: #1b2a3e;
  --color-space-800: #1e3048;
  --color-space-700: #263b5a;
  --color-space-600: #2d476c;
  --color-space-500: #35537e;
  --color-space-400: #3c5f90;
  --color-space-300: #446ba2;
  --color-space-200: #4b77b4;
  --color-space-100: #5d84bb;
  --color-space-50: #6f92c3;
  --color-astronaut-500: #314c73;
  --color-astronaut-400: #a2b9d7;
  --color-astronaut-300: #cdd9ea;
  --color-astronaut-200: #e9edf5;
  --color-astronaut-100: #f4f6fb;
  --color-sky-800: #025e88;
  --color-sky-700: #0370a1;
  --color-sky-500: #0ea6e9;
  --color-sky-400: #38bdf8;
  --color-sky-300: #7dd5fc;
  --color-sky-100: #e0f5fe;
  --color-grass-800: #03663f;
  --color-grass-700: #047850;
  --color-grass-500: #10b976;
  --color-grass-400: #2dce89;
  --color-grass-300: #6ee7af;
  --color-grass-100: #d1fae2;
  --color-tomato-800: #a01e10;
  --color-tomato-700: #c02515;
  --color-tomato-500: #f64e3d;
  --color-tomato-400: #fe796b;
  --color-tomato-300: #ffaaa1;
  --color-tomato-100: #ffe4e1;
  --color-peach-800: #8f3205;
  --color-peach-700: #c64508;
  --color-peach-500: #fe7a11;
  --color-peach-400: #ff9d41;
  --color-peach-300: #ffbf71;
  --color-peach-100: #ffeed4;
  --color-canary-700: #6f5000;
  --color-canary-500: #e7ad0b;
  --color-canary-400: #f7c618;
  --color-canary-300: #fad838;
  --color-canary-200: #fced8c;
  --color-canary-100: #fdf7c4;
  --color-orchid-700: #4a1fd6;
  --color-orchid-600: #5d30f7;
  --color-orchid-500: #7b61ff;
  --color-orchid-400: #9385ff;
  --color-orchid-300: #b7b1ff;
  --color-orchid-200: #d5d4ff;
  --color-berry-800: #1846b0;
  --color-berry-700: #1d58d8;
  --color-berry-600: #2563eb;
  --color-berry-500: #3b76f6;
  --color-berry-400: #6090fa;
  --color-berry-300: #93b4fd;
  --color-rose-800: #962057;
  --color-rose-600: #d0407f;
  --color-rose-500: #df5591;
  --color-rose-400: #e76da6;
  --color-rose-300: #f2afcf;
  --color-rose-200: #f9d4e5;
  --color-smoke-900: #414957;
  --color-smoke-800: #515a6c;
  --color-smoke-700: #656f83;
  --color-smoke-600: #7c8598;
  --color-smoke-500: #97a1b5;
  --color-smoke-400: #b3bccd;
  --color-smoke-300: #d0d8e6;
  --color-smoke-200: #e3e8f1;
  --color-smoke-100: #eef1f7;
  --color-smoke-50: #f6f8fb;
  --color-white: #ffffff;
  --color-black: #000000;
  --brand-pink: #e76da6;
  --brand-blue: #48a6ec;
  --brand-yellow: #f3cd46;
  --surface-page: var(--color-space-950);
  --surface-rail: var(--color-space-850);
  --surface-inset: var(--color-space-900);
  --surface-raised: var(--color-space-800);
  --surface-overlay: var(--color-space-800);
  --surface-input: var(--color-space-925);
  --border-subtle: var(--color-space-600);
  --border-default: var(--color-space-500);
  --border-strong: var(--color-space-200);
  --border-focus: var(--color-sky-400);
  --scrollbar-thumb: var(--color-space-500);
  --scrollbar-thumb-hover: var(--text-muted);
  --text-primary: var(--color-white);
  --text-secondary: var(--color-astronaut-300);
  --text-muted: var(--color-space-50);
  --text-disabled: var(--color-space-200);
  --text-placeholder: var(--color-space-100);
  --text-on-accent: var(--color-white);
  --accent: var(--color-astronaut-500);
  --accent-hover: var(--color-space-400);
  --accent-border: var(--color-space-400);
  --accent-strong: var(--color-space-200);
  --link: var(--color-sky-300);
  --link-hover: var(--color-sky-100);
  --icon-accent: var(--color-sky-300);
  --btn-default-border: var(--color-space-500);
  --btn-peach-hover: var(--color-peach-500);
  --btn-peach-border: var(--color-peach-500);
  --seg-active-ring: var(--border-default);
  --control-selected: var(--color-sky-500);
  --success: var(--color-grass-500);
  --success-text: var(--color-grass-400);
  --success-soft: rgba(16, 185, 118, 0.14);
  --success-border: rgba(16, 185, 118, 0.45);
  --danger: var(--color-tomato-500);
  --danger-strong: var(--color-tomato-700);
  --danger-text: var(--color-tomato-400);
  --danger-soft: rgba(246, 78, 61, 0.14);
  --danger-border: rgba(254, 121, 107, 0.42);
  --warning: var(--color-peach-400);
  --warning-text: #f3c77a;
  --warning-soft: #2a2410;
  --warning-border: #5a4a1b;
  --info: var(--color-sky-500);
  --info-text: #86b6e6;
  --info-soft: #122031;
  --info-border: #2d4a6b;
  --cat-blue-text: var(--color-astronaut-400);
  --cat-sky-text: var(--color-sky-300);
  --cat-orchid-text: var(--color-orchid-300);
  --cat-berry-text: var(--color-berry-300);
  --cat-pink-text: var(--color-rose-300);
  --cat-canary-text: var(--color-canary-300);
  --backdrop: rgba(15, 24, 36, 0.66);
  --shadow-edge-color: rgba(0, 0, 0, 0.45);
  --rail-accent: var(--color-sky-400);
  --shadow-xs: 0 1px 2px rgba(15, 24, 36, 0.3);
  --shadow-sm: 0 1px 2px rgba(15, 24, 36, 0.4);
  --shadow-md: 0 4px 14px rgba(15, 24, 36, 0.45);
  --shadow-lg: 0 16px 40px rgba(15, 24, 36, 0.5);
  --shadow-xl: 0 24px 60px rgba(15, 24, 36, 0.6);
  --shadow-popup: 0 24px 60px rgba(15, 24, 36, 0.6);
  --shadow-knob: 0 1px 4px rgba(0, 0, 0, 0.3);
  --focus-ring: 0 0 0 3px rgba(56, 189, 248, 0.4);
  --focus-ring-subtle: 0 0 0 2px rgba(56, 189, 248, 0.22);
}
[data-theme="light"] {
  --surface-page: var(--color-smoke-200);
  --surface-rail: var(--color-smoke-300);
  --surface-inset: var(--color-smoke-50);
  --surface-raised: var(--color-white);
  --surface-overlay: var(--color-white);
  --surface-input: var(--color-white);
  --border-subtle: var(--color-smoke-300);
  --border-default: var(--color-smoke-600);
  --border-strong: var(--color-smoke-800);
  --border-focus: var(--color-space-200);
  --scrollbar-thumb: var(--color-smoke-500);
  --scrollbar-thumb-hover: var(--text-muted);
  --text-primary: var(--color-space-900);
  --text-secondary: var(--color-astronaut-500);
  --text-muted: var(--color-smoke-800);
  --text-disabled: var(--color-smoke-500);
  --text-placeholder: var(--color-smoke-700);
  --text-on-accent: var(--color-white);
  --accent: var(--color-astronaut-500);
  --accent-hover: var(--color-space-600);
  --accent-border: var(--color-astronaut-500);
  --accent-strong: var(--color-space-400);
  --link: var(--color-astronaut-500);
  --link-hover: var(--color-space-600);
  --icon-accent: var(--color-space-400);
  --btn-default-border: var(--color-space-900);
  --btn-peach-hover: var(--color-peach-800);
  --btn-peach-border: var(--color-peach-800);
  --seg-active-ring: var(--border-default);
  --control-selected: var(--color-sky-700);
  --success: var(--color-grass-500);
  --success-text: var(--color-grass-800);
  --success-soft: var(--color-grass-100);
  --success-border: var(--color-grass-300);
  --danger: var(--color-tomato-500);
  --danger-strong: var(--color-tomato-700);
  --danger-text: var(--color-tomato-800);
  --danger-soft: var(--color-tomato-100);
  --danger-border: var(--color-tomato-300);
  --warning: var(--color-peach-500);
  --warning-text: var(--color-peach-800);
  --warning-soft: var(--color-peach-100);
  --warning-border: var(--color-peach-300);
  --info: var(--color-sky-500);
  --info-text: var(--color-sky-800);
  --info-soft: var(--color-sky-100);
  --info-border: var(--color-sky-300);
  --cat-blue-text: var(--color-astronaut-500);
  --cat-sky-text: var(--color-sky-800);
  --cat-orchid-text: var(--color-orchid-700);
  --cat-berry-text: var(--color-berry-800);
  --cat-pink-text: var(--color-rose-800);
  --cat-canary-text: var(--color-canary-700);
  --backdrop: rgba(27, 36, 54, 0.4);
  --shadow-edge-color: rgba(23, 36, 54, 0.12);
  --rail-accent: var(--color-sky-400);
  --shadow-xs: 0 1px 2px rgba(23, 36, 54, 0.06);
  --shadow-sm: 0 1px 2px rgba(23, 36, 54, 0.06), 0 1px 3px rgba(23, 36, 54, 0.08);
  --shadow-md: 0 2px 4px rgba(23, 36, 54, 0.05), 0 6px 16px rgba(23, 36, 54, 0.08);
  --shadow-lg: 0 4px 8px rgba(23, 36, 54, 0.05), 0 14px 32px rgba(23, 36, 54, 0.10);
  --shadow-xl: 0 8px 16px rgba(23, 36, 54, 0.06), 0 24px 48px rgba(23, 36, 54, 0.12);
  --shadow-popup: 0 8px 16px rgba(23, 36, 54, 0.06), 0 24px 48px rgba(23, 36, 54, 0.14);
  --shadow-knob: 0 1px 3px rgba(23, 36, 54, 0.22), 0 0 0 1px rgba(23, 36, 54, 0.06);
  --focus-ring: 0 0 0 3px rgba(53, 98, 148, 0.3);
  --focus-ring-subtle: 0 0 0 2px rgba(53, 98, 148, 0.18);
}
:root {
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 14px;
  --space-8: 16px;
  --space-10: 20px;
  --space-12: 24px;
  --space-14: 28px;
  --space-16: 32px;
  --space-20: 40px;
  --space-24: 48px;
  --space-32: 64px;
  --stack-control: 18px;
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-pill: 999px;
  --radius-circle: 50%;
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 15px;
  --text-xl: 17px;
  --text-section: 19px;
  --text-2xl: 21px;
  --text-3xl: 26px;
  --text-4xl: 32px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.06em;
  --rail-width: 64px;
  --rail-width-app: 80px;
  --header-height: 64px;
  --content-max: 1200px;
  --laptop-min: 1368px;
  --form-max-width: 800px;
  --page-max-width: 1500px;
  --control-height-sm: 32px;
  --control-height-md: 40px;
  --control-height-lg: 44px;
  --control-height-xl: 48px;
  --tap-target: 44px;
  --blur-backdrop: blur(3px);
  --blur-frosted: blur(10px);
  --font-body: "Red Hat Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Red Hat Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
.text-4xl { font-family: var(--font-body); font-size: 32px; font-weight: 600; letter-spacing: -0.01em; }
.text-3xl { font-family: var(--font-body); font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }
.text-2xl { font-family: var(--font-body); font-size: 21px; font-weight: 600; }
.text-section { font-family: var(--font-body); font-size: 19px; font-weight: 600; }
.text-xl { font-family: var(--font-body); font-size: 17px; font-weight: 600; }
.text-lg { font-family: var(--font-body); font-size: 15px; font-weight: 600; }
.text-md { font-family: var(--font-body); font-size: 14px; font-weight: 500; }
.text-sm { font-family: var(--font-body); font-size: 13px; font-weight: 400; }
.text-xs { font-family: var(--font-body); font-size: 12px; font-weight: 500; }
.text-2xs { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; }