: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-14: 56px; --space-16: 64px; --space-20: 80px;
  --space-24: 96px; --space-32: 128px; --space-40: 160px;

  --page-max: 1280px;
  --page-gutter: 40px;       /* 20px under 640px */
  --section-y: 128px;        /* 96px on mobile */

  --radius-sm: 10px;   /* small buttons, store badges */
  --radius-md: 14px;   /* rows inside cards, toasts */
  --radius-lg: 20px;   /* cards */
  --radius-sheet: 40px;/* section sheets (top corners only), 28px on mobile */
  --radius-device: 48px;
  --radius-pill: 999px;

  --shadow-device: 0 40px 80px -30px rgba(0,0,0,0.8);
  --shadow-sheet: 0 -30px 60px -30px rgba(0,0,0,0.5);
  --shadow-modal: 0 40px 80px -20px rgba(0,0,0,0.6);
  --shadow-toast: 0 20px 40px -20px rgba(0,0,0,0.6);

  --blur-chrome: saturate(180%) blur(18px);
  --blur-glass: blur(16px) saturate(160%);
  --hit-min: 44px;
}
:root {
  --font-display: 'Clash Grotesk', 'Satoshi', system-ui, sans-serif;
  --font-body: 'Satoshi', system-ui, -apple-system, sans-serif;

  --weight-regular: 400; --weight-medium: 500; --weight-bold: 700;

  /* Display — Clash Grotesk 500. Tracking tightens as size grows. */
  --type-display-xl: 500 104px/0.94 var(--font-display);  --track-display-xl: -0.035em;
  --type-display-l: 500 96px/0.95 var(--font-display);    --track-display-l: -0.035em;
  --type-h1: 500 64px/1 var(--font-display);              --track-h1: -0.03em;
  --type-h2: 500 48px/1.05 var(--font-display);           --track-h2: -0.03em;
  --type-h3: 500 36px/1.1 var(--font-display);            --track-h3: -0.02em;
  --type-h4: 500 28px/1.15 var(--font-display);           --track-h4: -0.02em;
  --type-h5: 500 22px/1.2 var(--font-display);            --track-h5: -0.01em;
  --type-stat: 500 200px/1 var(--font-display);           --track-stat: -0.04em;

  /* Body — Satoshi. Never below 13px; body copy 15px+. */
  --type-body-l: 400 19px/1.55 var(--font-body);
  --type-body: 400 17px/1.6 var(--font-body);
  --type-body-s: 400 15px/1.55 var(--font-body);
  --type-label: 700 15px/1.3 var(--font-body);
  --type-caption: 700 13px/1.3 var(--font-body);
}
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* default for everything */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-press: 120ms;
  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-reveal: 900ms;
  --dur-slow: 1300ms;
  --reveal-distance: 32px;
  --stagger: 100ms;
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-reveal: 1ms; --dur-slow: 1ms; --reveal-distance: 0px; }
}
:root {
  /* Brand violet → blue. 600/700 are the only values allowed behind white text. */
  --brand-50: #F5F4FF;
  --brand-100: #ECE9FF;
  --brand-200: #C9C2FF;
  --brand-300: #A99FFF;
  --brand-400: #8B7BFF;   /* decorative: gradients, glows */
  --brand-500: #6E63FF;   /* decorative / large text only (4.29:1 with white) */
  --brand-600: #5B4BF5;   /* white text 5.57:1 */
  --brand-700: #4A3FE0;   /* white text 6.82:1, hover */
  --brand-800: #3B30C4;   /* text on brand-100 / white, 8.7:1 */
  --blue-500: #4C6BFF;    /* decorative */
  --blue-600: #3F5BE8;    /* white text 5.42:1 */
  --blue-700: #3552D8;    /* white text 6.27:1, hover */

  --gradient-action: linear-gradient(120deg, var(--brand-600) 0%, var(--blue-600) 100%);
  --gradient-action-hover: linear-gradient(120deg, var(--brand-700) 0%, var(--blue-700) 100%);
  --gradient-tile: linear-gradient(135deg, var(--brand-600), var(--blue-600));
  --gradient-glow: radial-gradient(ellipse at 50% 60%, rgba(110,99,255,0.45), transparent 65%);
  --gradient-glass: linear-gradient(120deg, rgba(139,123,255,0.20), rgba(76,107,255,0.14) 55%, rgba(201,194,255,0.16));

  /* Pro only: the app's gradients.pro in theme/semantic/gradients.ts. Dark text on it. */
  --amber-300: #FFD447;
  --amber-400: #FFC233;
  --coral-400: #FF8A5C;
  --gradient-pro: linear-gradient(135deg, var(--amber-300) 0%, var(--amber-400) 60%, var(--coral-400) 100%);
  --shadow-pro: 0 10px 28px rgba(255,194,51,0.3);

  /* Ink (dark surfaces) */
  --ink-950: #0B0A12;  --ink-900: #0F0E17;  --ink-850: #15131F;  --ink-800: #1B1926;  --ink-700: #2B2940;
  --ink-text: #0E0D16;
  /* Mist (light surfaces) */
  --paper: #FFFFFF;  --mist-50: #F5F4FA;  --mist-100: #EDEBF5;  --mist-200: #E8E6F0;  --mist-300: #DAD7E8;
  --text-body-light: #3A3848;  --text-muted-light: #5C5A6B;

  /* ---------- Semantic, dark theme (default) ---------- */
  --bg-page: var(--ink-950);
  --surface-card: var(--ink-850);
  --surface-chrome: rgba(11,10,18,0.62);
  --surface-toast: rgba(34,31,50,0.78);
  --border-subtle: rgba(255,255,255,0.035);
  --border-toast: rgba(255,255,255,0.09);
  --text-primary: #F4F3F8;
  --text-rgb: 244,243,248;          /* rgba(var(--text-rgb), .72) secondary · .6 tertiary floor */
  --overlay-rgb: 255,255,255;       /* rows, tracks, hovers on surfaces */
  --text-accent: var(--brand-300);
  --text-pill: #F4F3F8;
  --status-airing-bg: rgba(110,99,255,0.22);  --status-airing-fg: var(--brand-200);
  --status-renewed-bg: rgba(74,222,160,0.16); --status-renewed-fg: #7DEBBE;
  --shadow-toast: 0 20px 40px -20px rgba(0,0,0,0.6);
  --shadow-sheet: 0 -30px 60px -30px rgba(0,0,0,0.5);
  --logo-dark: block; --logo-light: none;

  /* Sheet sections (alternate against the page: white in dark theme, ink in light theme) */
  --sheet-bg: var(--paper);
  --sheet-card: var(--mist-50);
  --sheet-fg: var(--ink-text);
  --sheet-fg-hover: var(--ink-700);
  --sheet-body: var(--text-body-light);
  --sheet-muted: var(--text-muted-light);
  --sheet-line: var(--mist-200);
  --sheet-track: var(--mist-300);
  --sheet-accent: var(--brand-600);
  --sheet-accent-strong: var(--brand-700);
  --sheet-icon: var(--ink-text);
  --sheet-selected: var(--brand-100);

  --glass-chip-1: linear-gradient(135deg, rgba(241,238,255,0.74), rgba(220,213,255,0.56));
  --glass-chip-2: linear-gradient(135deg, rgba(234,241,255,0.74), rgba(210,224,255,0.56));
  --glass-chip-3: linear-gradient(135deg, rgba(236,235,255,0.74), rgba(214,222,255,0.56));
  --glass-chip-fg: #232A7A; --glass-chip-border: rgba(255,255,255,0.85); --glass-chip-tile: rgba(255,255,255,0.75);
  --glass-chip-ring-1: var(--brand-600); --glass-chip-ring-2: var(--blue-600); --glass-chip-ring-3: var(--brand-700);

  --icon-tile-bg: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(236,233,255,0.55));
  --icon-tile-border: rgba(255,255,255,0.9);
  --icon-tile-shadow: 0 10px 24px -10px rgba(91,75,245,0.4), inset 0 1px 0 #fff, inset 0 -8px 16px -10px rgba(91,75,245,0.3);

  --liquid-bg: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(139,123,255,0.10) 60%, rgba(76,107,255,0.08));
  --liquid-bg-hover: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(139,123,255,0.18) 60%, rgba(76,107,255,0.14));
  --liquid-border: rgba(255,255,255,0.16);
  --liquid-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.2), 0 8px 20px -12px rgba(0,0,0,0.6);
  --liquid-shadow-hover: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 0 rgba(0,0,0,0.2), 0 14px 28px -12px rgba(91,75,245,0.55);
  --liquid-ring: rgba(255,255,255,0.18);
  --liquid-glow: radial-gradient(ellipse 30% 45% at 30% 55%, rgba(110,99,255,0.42), transparent 100%), radial-gradient(ellipse 30% 50% at 68% 50%, rgba(63,91,232,0.36), transparent 100%);

  --check-bg: rgba(110,99,255,0.18); --check-border: rgba(169,159,255,0.55); --check-mark: var(--brand-200);

  --focus-ring: 0 0 0 3px var(--paper), 0 0 0 5px var(--brand-600);
}

[data-theme="light"] {
  --bg-page: #F6F5FA;
  --surface-card: var(--paper);
  --surface-chrome: rgba(255,255,255,0.72);
  --surface-toast: rgba(255,255,255,0.92);
  --border-subtle: rgba(14,13,22,0.07);
  --border-toast: rgba(14,13,22,0.07);
  --text-primary: var(--ink-text);
  --text-rgb: 14,13,22;
  --overlay-rgb: 14,13,22;
  --text-accent: var(--brand-600);
  --text-pill: var(--brand-800);
  --status-airing-bg: var(--brand-100); --status-airing-fg: var(--brand-800);
  --status-renewed-bg: #E3F6EC;         --status-renewed-fg: #11613D;
  --shadow-toast: 0 20px 40px -24px rgba(14,13,22,0.25);
  --shadow-sheet: 0 -30px 60px -30px rgba(14,13,22,0.12);
  --logo-dark: none; --logo-light: block;

  --sheet-bg: var(--ink-950);
  --sheet-card: var(--ink-850);
  --sheet-fg: #F4F3F8;
  --sheet-fg-hover: var(--paper);
  --sheet-body: rgba(244,243,248,0.85);
  --sheet-muted: rgba(244,243,248,0.68);
  --sheet-line: rgba(255,255,255,0.07);
  --sheet-track: rgba(255,255,255,0.22);
  --sheet-accent: var(--brand-300);
  --sheet-accent-strong: var(--brand-300);
  --sheet-icon: var(--ink-700);
  --sheet-selected: rgba(110,99,255,0.2);
  --icon-tile-bg: linear-gradient(145deg, rgba(139,123,255,0.22), rgba(76,107,255,0.08));
  --icon-tile-border: rgba(255,255,255,0.12);
  --icon-tile-shadow: 0 10px 28px -10px rgba(110,99,255,0.55), inset 0 1px 0 rgba(255,255,255,0.14);
  --glass-chip-1: linear-gradient(135deg, rgba(139,123,255,0.26), rgba(110,99,255,0.12));
  --glass-chip-2: linear-gradient(135deg, rgba(76,107,255,0.26), rgba(63,91,232,0.12));
  --glass-chip-3: linear-gradient(135deg, rgba(169,159,255,0.22), rgba(76,107,255,0.12));
  --glass-chip-fg: #F4F3F8; --glass-chip-border: rgba(255,255,255,0.14); --glass-chip-tile: rgba(255,255,255,0.1);
  --glass-chip-ring-1: var(--brand-300); --glass-chip-ring-2: #9DB0FF; --glass-chip-ring-3: var(--brand-200);
  --liquid-bg: linear-gradient(135deg, rgba(255,255,255,0.75), rgba(236,233,255,0.6) 60%, rgba(220,228,255,0.55));
  --liquid-bg-hover: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(220,213,255,0.75) 60%, rgba(210,224,255,0.7));
  --liquid-border: rgba(255,255,255,0.9);
  --liquid-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(14,13,22,0.06), 0 8px 20px -12px rgba(14,13,22,0.25);
  --liquid-shadow-hover: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(14,13,22,0.06), 0 14px 28px -12px rgba(91,75,245,0.4);
  --liquid-ring: rgba(14,13,22,0.08);
  --liquid-glow: radial-gradient(ellipse 30% 45% at 30% 55%, rgba(110,99,255,0.3), transparent 100%), radial-gradient(ellipse 30% 50% at 68% 50%, rgba(76,107,255,0.26), transparent 100%);
  --check-bg: var(--brand-100); --check-border: var(--brand-600); --check-mark: var(--brand-700);
}