/* Manin Studio — generated from tokens.json */
:root, [data-theme="dark"] {
  --bg: #0b0c0e;
  --surface: #121417;
  --surface-raised: #1a1d21;
  --surface-sunken: #07080a;
  --line: #262a30;
  --line-strong: #626973;
  --grid-dot: #23272c;
  --ink: #ede9e3;
  --ink-muted: #a29d96;
  --ink-faint: #6f6c67;
  --accent: #ffa133;
  --accent-hot: #ff6b2c;
  --accent-ink: #ffb45c;
  --accent-display: #ffa133;
  --accent-soft: #2b1d0d;
  --accent-glow: #ffa13366;
  --on-accent: #0b0c0e;
  --ice: #8ccff0;
  --ice-ink: #9ed8f5;
  --ice-soft: #0f2230;
  --on-ice: #0b0c0e;
  --steel: #7d8896;
  --danger: #ff6b6b;
  --danger-soft: #2e1214;
  --success: var(--ice-ink);
  --link: var(--accent-ink);
  --focus: #ffc266;
  --shadow-panel: 0 1px 0 #ffffff0a inset, 0 18px 48px #00000099;
  --glow-accent: 0 0 0 1px #ffa13366, 0 0 28px #ffa13340;
  --glow-ice: 0 0 0 1px #8ccff059, 0 0 24px #8ccff033;
  --focus-ring: 0 0 0 2px #0b0c0e, 0 0 0 4px #ffc266;
}
[data-theme="light"] {
  --bg: #ecedef;
  --surface: #f6f7f8;
  --surface-raised: #ffffff;
  --surface-sunken: #e2e4e7;
  --line: #d3d6db;
  --line-strong: #858b94;
  --grid-dot: #c6cad0;
  --ink: #111317;
  --ink-muted: #50555d;
  --ink-faint: #7e838b;
  --accent: #f08c00;
  --accent-hot: #e8541a;
  --accent-ink: #9a4a00;
  --accent-display: #c25e00;
  --accent-soft: #fdebd3;
  --accent-glow: #f08c0033;
  --on-accent: #111317;
  --ice: #1f7aa6;
  --ice-ink: #0c5e82;
  --ice-soft: #dceff8;
  --on-ice: #ffffff;
  --steel: #66707c;
  --danger: #c42b2b;
  --danger-soft: #fbe3e3;
  --success: var(--ice-ink);
  --link: var(--accent-ink);
  --focus: #9a4a00;
  --shadow-panel: 0 1px 2px #1113170f, 0 14px 36px #11131717;
  --glow-accent: 0 0 0 1px #f08c0066, 0 8px 24px #f08c002e;
  --glow-ice: 0 0 0 1px #1f7aa659, 0 8px 22px #1f7aa62b;
  --focus-ring: 0 0 0 2px #ecedef, 0 0 0 4px #9a4a00;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 120px;
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-full: 9999px;
  --opacity-grid: 0.6;
  --opacity-ghost: 0.08;
  --opacity-grain: 0.22;
  --font-display: "Manrope", "Inter", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
}
.display-xl { font-family: var(--font-display); font-size: 88px; line-height: 94px; font-weight: 700; letter-spacing: -0.03em; }
.display-l { font-family: var(--font-display); font-size: 56px; line-height: 62px; font-weight: 700; letter-spacing: -0.03em; }
.display-m { font-family: var(--font-display); font-size: 34px; line-height: 40px; font-weight: 700; letter-spacing: -0.02em; }
.display-s { font-family: var(--font-display); font-size: 21px; line-height: 27px; font-weight: 700; letter-spacing: -0.01em; }
.lead { font-family: var(--font-sans); font-size: 20px; line-height: 30px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 400; }
.body-s { font-family: var(--font-sans); font-size: 14px; line-height: 22px; font-weight: 400; }
.ui { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 500; }
.label { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.1em; }
.code { font-family: var(--font-mono); font-size: 14px; line-height: 22px; font-weight: 400; }
.data { font-family: var(--font-mono); font-size: 16px; line-height: 22px; font-weight: 400; }