/* StyleLift Design System — generated from tokens.json */
/* Source: tokens.json. Do not edit by hand: change tokens.json, then run `npm run tokens`. */

:root, :host, [data-theme="light"] {
  color-scheme: light;
  --paper: #f4f2ec;
  --card: #fffdf8;
  --ink: #121314;
  --soft: #5a5c61;
  --line: #ddd8cc;
  --grid: rgba(18, 19, 20, 0.05);
  --accent: var(--lime);
  --on-accent: #121314;
  --ok: #2c7a2f;
  --err: #b42318;
  --focus: var(--ink);
  --mark-band: var(--accent);
  --mark-ink: var(--ink);
  --lime: #ccff4d;
  --peach: #ffb38a;
  --accent-hover: #dcff85;
  --accent-wash: rgba(204, 255, 77, 0.07);
  --accent-edge: rgba(204, 255, 77, 0.28);
  --accent-glow: rgba(204, 255, 77, 0.16);
  --panel-ink: #111214;
  --panel-ink-2: #17191d;
  --panel-ink-3: #22252b;
  --panel-line: #2a2d34;
  --panel-text: #ecebe6;
  --panel-muted: #8d9098;
  --hl-margin: rgba(255, 166, 87, 0.22);
  --hl-border: rgba(204, 255, 77, 0.14);
  --hl-content: rgba(110, 168, 255, 0.2);
  --code-property: #cfcdc6;
  --code-value: var(--accent);
  --code-selector: var(--peach);
  --code-punct: #80838b;
  --code-comment: var(--panel-muted);
  --stage: var(--panel-ink);
  --stage-grid: rgba(236, 235, 230, 0.045);
  --stage-text: var(--panel-text);
  --stage-eyebrow: #9b9da3;
  --stage-sub: #a9abb1;
  --stage-faint: #7d8087;
  --frame-bar: #1c1e22;
  --frame-dot: #3a3d44;
  --frame-page: #ffffff;
  --band: #1a1c20;
  --shadow-card: 0 1px 0 #ddd8cc, 0 22px 48px -32px rgba(0, 0, 0, 0.35);
  --shadow-lift: 2px 3px 0 #121314;
  --shadow-logo: none;
  --shadow-panel: 0 28px 70px -18px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.35);
  --shadow-tag: 0 4px 14px rgba(0, 0, 0, 0.25);
  --shadow-toast: 0 14px 34px -8px rgba(0, 0, 0, 0.45);
  --shadow-swatch: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  --shadow-window: 0 40px 80px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --shadow-window-deep: 0 40px 80px -30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --shadow-sheet: 0 1px 0 #ddd8cc, 0 2px 4px -2px rgba(18, 19, 20, 0.08), 0 24px 48px -28px rgba(18, 19, 20, 0.32);
}

[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0f1012;
  --card: #16181b;
  --ink: #ecebe6;
  --soft: #9b9da3;
  --line: #2b2e34;
  --grid: rgba(236, 235, 230, 0.035);
  --accent: var(--lime);
  --ok: #9be37a;
  --err: #ff8b7b;
  --focus: var(--accent);
  --mark-band: #00000000;
  --mark-ink: var(--accent);
  --code-value: var(--accent);
  --code-selector: var(--peach);
  --code-comment: var(--panel-muted);
  --stage: var(--panel-ink);
  --stage-text: var(--panel-text);
  --shadow-card: 0 1px 0 #2b2e34, 0 22px 48px -32px rgba(0, 0, 0, 0.35);
  --shadow-lift: 2px 3px 0 #ecebe6;
  --shadow-logo: 0 0 0 1px #2b2e34;
  --shadow-sheet: 0 0 0 1px #2b2e34, inset 0 1px 0 rgba(236, 235, 230, 0.04), 0 24px 48px -28px rgba(0, 0, 0, 0.7);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0f1012;
    --card: #16181b;
    --ink: #ecebe6;
    --soft: #9b9da3;
    --line: #2b2e34;
    --grid: rgba(236, 235, 230, 0.035);
    --accent: var(--lime);
    --ok: #9be37a;
    --err: #ff8b7b;
    --focus: var(--accent);
    --mark-band: #00000000;
    --mark-ink: var(--accent);
    --code-value: var(--accent);
    --code-selector: var(--peach);
    --code-comment: var(--panel-muted);
    --stage: var(--panel-ink);
    --stage-text: var(--panel-text);
    --shadow-card: 0 1px 0 #2b2e34, 0 22px 48px -32px rgba(0, 0, 0, 0.35);
    --shadow-lift: 2px 3px 0 #ecebe6;
    --shadow-logo: 0 0 0 1px #2b2e34;
    --shadow-sheet: 0 0 0 1px #2b2e34, inset 0 1px 0 rgba(236, 235, 230, 0.04), 0 24px 48px -28px rgba(0, 0, 0, 0.7);
  }
}

:root, :host {
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-11: 11px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-26: 26px;
  --space-28: 28px;
  --space-30: 30px;
  --space-36: 36px;
  --space-40: 40px;
  --space-44: 44px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;
  --space-76: 76px;
  --space-80: 80px;
  --space-88: 88px;
  --space-96: 96px;
  --space-120: 120px;
  --radius-2: 2px;
  --radius-3: 3px;
  --radius-4: 4px;
  --radius-5: 5px;
  --radius-6: 6px;
  --radius-7: 7px;
  --radius-8: 8px;
  --radius-9: 9px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-14: 14px;
  --radius-20: 20px;
  --radius-pill: 999px;
  --radius-circle: 50%;
  --duration-100: 0.1s;
  --duration-120: 0.12s;
  --duration-150: 0.15s;
  --duration-200: 0.2s;
  --duration-220: 0.22s;
  --duration-250: 0.25s;
  --duration-700: 0.7s;
  --duration-toast: 1600ms;
  --delay-1: 0.05s;
  --delay-2: 0.12s;
  --delay-3: 0.2s;
  --delay-4: 0.28s;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-standard: ease;
  --z-top: 2147483647;
  --opacity-dim: 0.65;
  --opacity-hint: 0.65;
  --opacity-disabled: 0.55;
  --border-hair: 1px;
  --border-strong: 1.5px;
  --border-key: 2px;
  --outline-focus: 3px;
  --outline-focus-panel: 2px;
  --outline-offset: 2px;
  --outline-offset-input: 1px;
  --underline-offset: 3px;
  --halo-mark: 3px;
  --size-control: 46px;
  --size-icon-button: 24px;
  --size-mark: 9px;
  --size-swatch: 10px;
  --size-swatch-code: 9px;
  --size-logo: 30px;
  --size-tile-logo: 60px;
  --size-panel: 372px;
  --size-code-min: 72px;
  --size-page: 760px;
  --size-doc: 680px;
  --size-measure: 560px;
  --size-measure-card: 580px;
  --size-keys-col: 230px;
  --size-grid: 24px;
  --size-grid-stage: 28px;
  --size-caption: 380px;
  --size-frame: 752px;
  --size-frame-bar: 34px;
  --size-frame-dot: 11px;
  --size-crop: 480px;
  --size-narrow: 600px;
  --size-wide: calc(var(--size-frame) + var(--space-28) + var(--size-panel));
  --size-gutter: clamp(20px, 4vw, 56px);
  --fs-badge: 9.5px;
  --fs-10: 10px;
  --fs-11: 11px;
  --fs-kbd: 11.5px;
  --fs-12: 12px;
  --fs-code: 12.5px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-26: 26px;
  --fs-30: 30px;
  --fs-34: 34px;
  --fs-44: 44px;
  --fs-48: 48px;
  --fs-58: 58px;
  --fs-76: 76px;
  --fs-80: 80px;
  --fs-display: clamp(46px, 8.5vw, 80px);
  --fs-hero: clamp(46px, 6.6vw, 96px);
  --fs-section: clamp(30px, 3.3vw, 48px);
  --lh-none: 1;
  --lh-stage: 1.02;
  --lh-doc: 1.05;
  --lh-title: 1.1;
  --lh-heading: 1.2;
  --lh-panel: 1.55;
  --lh-body: 1.7;
  --ls-display: -0.02em;
  --ls-stage: -0.015em;
  --ls-caps: 0.16em;
  --ls-badge: 0.1em;
  --ls-tagline: 0.04em;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --font-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-mono-system: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
}

.display {
  font-family: var(--font-serif);
  font-size: 80px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.display-em {
  font-family: var(--font-serif);
  font-size: 80px;
  line-height: 1;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.02em;
}

.title {
  font-family: var(--font-serif);
  font-size: 34px;
  line-height: 1.1;
  font-weight: 400;
}

.wordmark {
  font-family: var(--font-serif);
  font-size: 30px;
  line-height: 1;
  font-weight: 400;
}

.body {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.7;
  font-weight: 400;
}

.body-strong {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.7;
  font-weight: 600;
}

.body-sm {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  font-weight: 400;
}

.label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
}

.caption {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  font-weight: 400;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: 0.16em;
}

.kbd {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 600;
}

.code-inline {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 400;
}

.panel-body {
  font-family: var(--font-mono-system);
  font-size: 12px;
  line-height: 1.55;
  font-weight: 400;
}

.panel-strong {
  font-family: var(--font-mono-system);
  font-size: 12px;
  line-height: 1.55;
  font-weight: 600;
}

.panel-small {
  font-family: var(--font-mono-system);
  font-size: 11px;
  line-height: 1.55;
  font-weight: 400;
}

.panel-tag {
  font-family: var(--font-mono-system);
  font-size: 11px;
  line-height: 1.55;
  font-weight: 600;
}

.panel-kbd {
  font-family: var(--font-mono-system);
  font-size: 10px;
  line-height: 1.55;
  font-weight: 500;
}

.panel-badge {
  font-family: var(--font-mono-system);
  font-size: 9.5px;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: 0.1em;
}

.panel-icon {
  font-family: var(--font-mono-system);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
}

.stage-marquee {
  font-family: var(--font-serif);
  font-size: 76px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.stage-title {
  font-family: var(--font-serif);
  font-size: 58px;
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: -0.015em;
}

.stage-tile {
  font-family: var(--font-serif);
  font-size: 48px;
  line-height: 1;
  font-weight: 400;
}

.stage-wordmark {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 400;
}

.stage-lede {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 400;
}

.stage-sub {
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.7;
  font-weight: 400;
}

.stage-eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.16em;
}

.stage-tagline {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.doc-title {
  font-family: var(--font-serif);
  font-size: 44px;
  line-height: 1.05;
  font-weight: 400;
}

.doc-heading {
  font-family: var(--font-serif);
  font-size: 26px;
  line-height: 1.2;
  font-weight: 400;
}

.doc-body {
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
}

.doc-meta {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}