/* local preview only — the page generates the real tokens.css */
:root, [data-theme="maker"] { --sky: #63bcfe; --azure: #468ad5; --cyan: #0199c2; --abyss: #0b2d37; --canvas: #f3f6f8; --surface: #ffffff; --surface-raised: #ffffff; --surface-sunken: #e9eef2; --line: #dde4e9; --line-strong: #7a8a96; --ink: #0b1d24; --ink-muted: #4a5c67; --brand: #00749e; --brand-hover: #00648a; --brand-pressed: #005376; --on-brand: #ffffff; --brand-soft: #dff2fa; --brand-ink: #006a91; --focus-ring: #005376; --success: #0e7a4f; --success-soft: #dcf5e8; --danger: #b8361a; --danger-soft: #fde7e1; --warning: #8a5a00; --warning-soft: #fdf1d6; --on-tile: #ffffff; --tile-pcf: #8c3a8f; --tile-script: #a35a00; --tile-command: #0f6cbd; --tile-plugin: #5747b8; --tile-automation: #0b7a8c; --tile-data: #107c41; --tile-ai: #c2410c; --tile-web: #3d5566; --glow-a: #dff2fa; --glow-b: #e3edf9; --glow-c: #eaf6ff; --code-bg: #0d1b21; --code-ink: #d7e3ea; --code-keyword: #7cc7ff; --code-string: #f2b880; --code-comment: #8fa3ae; --code-number: #b9e59a; --code-type: #e7a8ff; --stage-bar: #0b2d37; --stage-on-bar: #ffffff; --stage-canvas: #f5f6f7; --stage-surface: #ffffff; --stage-line: #e1e4e8; --stage-line-strong: #868f99; --stage-ink: #1f2328; --stage-ink-muted: #5b6570; --stage-accent: #0f6cbd; --stage-accent-soft: #e6f0fa; --stage-danger: #a8321a; --stage-danger-soft: #fde7e1; --stage-success: #0b6e47; --stage-success-soft: #dcf5e8; --shadow-card: 0 1px 2px #0b2d3714, 0 2px 8px #0b2d370f; --shadow-flyout: 0 4px 8px #0b2d371a, 0 16px 32px #0b2d371f; --shadow-dialog: 0 8px 16px #0b2d371f, 0 32px 64px #0b2d3729; }
[data-theme="maker-night"] { --canvas: #0d1418; --surface: #141d22; --surface-raised: #1b262d; --surface-sunken: #0a1013; --line: #24313a; --line-strong: #5d707c; --ink: #e6eef2; --ink-muted: #a2b4bf; --brand: #5cc4f5; --brand-hover: #7dd1f7; --brand-pressed: #a5def9; --on-brand: #04202b; --brand-soft: #0b2d37; --brand-ink: #63bcfe; --focus-ring: #63bcfe; --success: #4fd18b; --success-soft: #0f2f22; --danger: #ff8a6b; --danger-soft: #3a1a12; --warning: #f2c14e; --warning-soft: #33270c; --glow-a: #0b2d37; --glow-b: #10263a; --glow-c: #0b2430; --code-bg: #0a1013; --code-ink: #d7e3ea; --code-keyword: #7cc7ff; --code-string: #f2b880; --code-comment: #8fa3ae; --code-number: #b9e59a; --code-type: #e7a8ff; --stage-ink-muted: #5b6570; --stage-accent: #0f6cbd; --shadow-card: 0 1px 2px #00000066, 0 4px 12px #00000040; --shadow-flyout: 0 4px 8px #00000066, 0 16px 32px #00000059; --shadow-dialog: 0 8px 16px #00000080, 0 32px 64px #00000080; }
[data-theme="aurora"] { --canvas: #051a21; --surface: #ffffff12; --surface-raised: #16323cf2; --surface-sunken: #00000033; --line: #ffffff1f; --line-strong: #ffffff73; --ink: #eaf7fc; --ink-muted: #a7c4cf; --brand: #63bcfe; --brand-hover: #8ccfff; --brand-pressed: #a9dcff; --on-brand: #04202b; --brand-soft: #214557; --brand-ink: #8fd3ff; --focus-ring: #8fd3ff; --success: #6fe0a4; --success-soft: #214749; --danger: #ff9f85; --danger-soft: #323f45; --warning: #f5cd6b; --warning-soft: #314542; --glow-a: #015d77; --glow-b: #2a5d94; --glow-c: #34729e; --code-bg: #06161c; --code-ink: #d7e3ea; --code-keyword: #8fd3ff; --code-string: #f2c094; --code-comment: #93abb5; --code-number: #b9e59a; --code-type: #e7b3ff; --stage-ink-muted: #5b6570; --stage-accent: #0f6cbd; --shadow-card: 0 8px 32px #00000059, inset 0 1px 0 #ffffff1a; --shadow-flyout: 0 16px 48px #00000080, inset 0 1px 0 #ffffff24; --shadow-dialog: 0 32px 96px #000000a6, inset 0 1px 0 #ffffff29; }
[data-theme="frost"] { --canvas: #e6eff4; --surface: #ffffffb8; --surface-raised: #fffffff2; --surface-sunken: #ffffff66; --line: #0b2d371a; --line-strong: #0b2d378c; --ink: #0b2d37; --ink-muted: #3c5864; --brand: #006d93; --brand-hover: #005e80; --brand-pressed: #004f6c; --on-brand: #ffffff; --brand-soft: #0199c21f; --brand-ink: #005e80; --focus-ring: #004f6c; --success: #0a6342; --success-soft: #0b6e471a; --danger: #982a12; --danger-soft: #b233171a; --warning: #744c00; --warning-soft: #7d52001a; --glow-a: #9edcf7; --glow-b: #b9d3f2; --glow-c: #c9f0ff; --code-bg: #0b2d37; --code-ink: #d7e3ea; --code-keyword: #8fd3ff; --code-string: #f2c094; --code-comment: #93b1bc; --code-number: #b9e59a; --code-type: #e7b3ff; --stage-ink-muted: #5b6570; --stage-accent: #0f6cbd; --shadow-card: 0 8px 32px #0b2d371a, inset 0 1px 0 #ffffffcc; --shadow-flyout: 0 16px 48px #0b2d3726, inset 0 1px 0 #ffffffe6; --shadow-dialog: 0 32px 96px #0b2d3733, inset 0 1px 0 #ffffffe6; }
[data-theme="plain"] { --canvas: #ffffff; --surface: #ffffff; --surface-raised: #ffffff; --surface-sunken: #f2f2f2; --line: #bdbdbd; --line-strong: #595959; --ink: #111111; --ink-muted: #3a3a3a; --brand: #0b4f6c; --brand-hover: #083d54; --brand-pressed: #062d3e; --on-brand: #ffffff; --brand-soft: #e8f1f5; --brand-ink: #0b4f6c; --focus-ring: #000000; --success: #0a5c3b; --success-soft: #e6f4ec; --danger: #9e2a10; --danger-soft: #fbe9e4; --warning: #6b4500; --warning-soft: #fbf3df; --glow-a: #ffffff; --glow-b: #ffffff; --glow-c: #ffffff; --code-bg: #f5f5f5; --code-ink: #111111; --code-keyword: #0b4f6c; --code-string: #7a3e00; --code-comment: #474747; --code-number: #2f5d00; --code-type: #6b2a6e; --stage-ink-muted: #454d56; --stage-accent: #0b4f8a; --shadow-card: none; --shadow-flyout: 0 0 0 1px #111111; --shadow-dialog: 0 0 0 2px #111111; }
[data-theme="legacy"] { --canvas: #101010; --surface: #171717; --surface-raised: #191919; --surface-sunken: #050505; --line: #313131; --line-strong: #707070; --ink: #f5f5f5; --ink-muted: #ffffffcc; --brand: #c70039; --brand-hover: #a8002f; --brand-pressed: #8f0028; --on-brand: #ffffff; --brand-soft: #c7003926; --brand-ink: #c70039; --focus-ring: #ffffff; --success: #04a777; --success-soft: #04a77726; --danger: #ff6b6b; --danger-soft: #c7003926; --warning: #dd7631; --warning-soft: #dd763126; --glow-a: #101010; --glow-b: #101010; --glow-c: #101010; --code-bg: #050505; --code-ink: #f5f5f5; --code-keyword: #ff8fa8; --code-string: #f2b880; --code-comment: #9a9a9a; --code-number: #b9e59a; --code-type: #e7a8ff; --stage-ink-muted: #5b6570; --stage-accent: #0f6cbd; --shadow-card: 0 0 25px #0000001a; --shadow-flyout: 0 0 25px #0000001a; --shadow-dialog: 0 0 25px #0000001a; }
: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; --radius-sm: 4px; --radius-md: 8px; --radius-tile: 10px; --radius-lg: 14px; --radius-xl: 24px; --radius-pill: 999px; --size-control-sm: 24px; --size-control: 32px; --size-control-lg: 40px; --size-nav: 56px; --size-content: 1180px; --blur-glass: 20px; --blur-strong: 36px; --z-nav: 40; --z-flyout: 60; --z-dialog: 80; --z-toast: 90; --font-display: "Sora", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; --font-sans: "Figtree", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, ui-monospace, monospace; }
.display-xl { font-family: var(--font-display); font-size: 64px; line-height: 68px; font-weight: 650; letter-spacing: -0.03em; }
.display { font-family: var(--font-display); font-size: 44px; line-height: 50px; font-weight: 600; letter-spacing: -0.02em; }
.title-1 { font-family: var(--font-display); font-size: 32px; line-height: 40px; font-weight: 600; letter-spacing: -0.015em; }
.title-2 { font-family: var(--font-display); font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.01em; }
.title-3 { font-family: var(--font-sans); font-size: 20px; line-height: 28px; font-weight: 650; }
.body-lg { font-family: var(--font-sans); font-size: 18px; line-height: 30px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 400; }
.body-sm { font-family: var(--font-sans); font-size: 14px; line-height: 22px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600; }
.caption { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.01em; }
.eyebrow { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; }
.code { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 400; }
.code-sm { font-family: var(--font-mono); font-size: 12px; line-height: 18px; font-weight: 400; }
@font-face { font-family: 'Sora'; src: url('/fonts/Sora-Variable.woff2') format('woff2'); font-weight: 100 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/fonts/Figtree-Variable.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/fonts/Figtree-Italic-Variable.woff2') format('woff2'); font-weight: 300 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/JetBrainsMono-Variable.woff2') format('woff2'); font-weight: 100 800; font-style: normal; font-display: swap; }