/* XXL Wallpapers — generated from tokens.json */
:root, [data-theme="dark"] {
  --surface-0: #060a17;
  --surface-1: #0f1629;
  --surface-2: #182038;
  --line: #253050;
  --line-strong: #5a6c94;
  --ink: #f2f6ff;
  --ink-muted: #aebbda;
  --ink-faint: #70809f;
  --brand: #fc7e01;
  --brand-hi: #fdc204;
  --brand-deep: #f74c07;
  --brand-shade: #b8170e;
  --brand-gloss: #fdf4b6;
  --on-brand: #060a17;
  --blue: #1870d2;
  --on-blue: #ffffff;
  --blue-deep: #2752a1;
  --cyan: #3acef7;
  --ice: #d9e9f7;
  --link: #4eb9f3;
  --focus: #fdc204;
  --outline: #2752a1;
  --scrim: #060a17b8;
  --panic: #d9221a;
  --on-panic: #ffffff;
  --on-accent: #060a17;
  --cat-super-intelligence: #3acef7;
  --cat-abstracts: #f046b4;
  --cat-terrains: #4ccb6a;
  --cat-monuments: #e3a86e;
  --cat-lineart-sunset: #ff6b8f;
  --cat-cats: #b89cff;
  --cat-panic-buttons: #ff6a5e;
  --cat-make-no-mistakes: #2fd6bd;
  --shadow-pop: 0 4px 0 0 #2752a1;
  --shadow-pop-brand: 0 4px 0 0 #b8170e;
  --shadow-card: 0 16px 40px 0 #00000099;
  --shadow-glow: 0 0 0 3px #3acef7, 0 0 32px 0 #3acef799;
}
[data-theme="light"] {
  --surface-0: #eef2f9;
  --surface-1: #ffffff;
  --surface-2: #f7f9fd;
  --line: #d5dcea;
  --line-strong: #7a879f;
  --ink: #060a17;
  --ink-muted: #4a5670;
  --ink-faint: #7a879f;
  --brand: #fc7e01;
  --brand-hi: #fdc204;
  --brand-deep: #f74c07;
  --brand-shade: #b8170e;
  --brand-gloss: #fdf4b6;
  --on-brand: #060a17;
  --blue: #045eba;
  --on-blue: #ffffff;
  --blue-deep: #2752a1;
  --cyan: #3acef7;
  --ice: #d9e9f7;
  --link: #045eba;
  --focus: #045eba;
  --outline: #060a17;
  --scrim: #060a17b8;
  --panic: #d9221a;
  --on-panic: #ffffff;
  --on-accent: #ffffff;
  --cat-super-intelligence: #0b6fa8;
  --cat-abstracts: #b0127a;
  --cat-terrains: #1e7a3c;
  --cat-monuments: #8a5a1e;
  --cat-lineart-sunset: #b9124a;
  --cat-cats: #6b3fcf;
  --cat-panic-buttons: #c4160e;
  --cat-make-no-mistakes: #0a7566;
  --shadow-pop: 0 4px 0 0 #060a17;
  --shadow-pop-brand: 0 4px 0 0 #b8170e;
  --shadow-card: 0 16px 40px 0 #060a1726;
  --shadow-glow: 0 0 0 3px #045eba;
}
: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;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --stroke-hairline: 1px;
  --stroke-control: 2px;
  --stroke-outline: 3px;
  --stroke-outline-lg: 5px;
  --aspect-32-9: 32 / 9;
  --font-display: "Lilita One", "Arial Black", Impact, sans-serif;
  --font-sans: Rubik, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --font-pixel: "Press Start 2P", "Courier New", monospace;
}
.hero { font-family: var(--font-display); font-size: 96px; line-height: 0.95; font-weight: 400; letter-spacing: 0.01em; }
.display { font-family: var(--font-display); font-size: 56px; line-height: 1.0; font-weight: 400; letter-spacing: 0.01em; }
.title-xl { font-family: var(--font-display); font-size: 36px; line-height: 1.05; font-weight: 400; }
.title { font-family: var(--font-display); font-size: 28px; line-height: 1.1; font-weight: 400; }
.heading { font-family: var(--font-sans); font-size: 20px; line-height: 28px; font-weight: 700; }
.subheading { font-family: var(--font-sans); font-size: 17px; line-height: 24px; font-weight: 600; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; }
.body-sm { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; }
.caption { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; }
.spec { font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 600; }
.spec-sm { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 600; }
.pixel { font-family: var(--font-pixel); font-size: 12px; line-height: 20px; font-weight: 400; }
