/* Bluecliff — generated from tokens.json */
/* Generated by scripts/build_design_system.py from design-system/tokens.json. */

:root, [data-theme="light"] {
  --plomb: #2f3a4f;
  --chemise: #f6a68b;
  --cordeau: #ff4f87;
  --on-plomb: #f2eeea;
  --ground: #f3f4f6;
  --surface: #ffffff;
  --surface-sunken: #f7f8f9;
  --surface-raised: #ffffff;
  --sidebar: #2f3a4f;
  --sidebar-label: #f2eeea;
  --sidebar-label-2: #c2c8d2;
  --sidebar-active: #f6a68b;
  --sidebar-active-fill: rgba(246, 166, 139, 0.10);
  --sidebar-hover: rgba(242, 238, 234, 0.08);
  --sidebar-fill: rgba(242, 238, 234, 0.05);
  --sidebar-separator: rgba(242, 238, 234, 0.12);
  --live: #ff7a8a;
  --fill: rgba(47, 58, 79, 0.08);
  --fill-hover: rgba(47, 58, 79, 0.14);
  --segment-on: #ffffff;
  --segment-edge: #767e8d;
  --knob: #ffffff;
  --row-hover: rgba(47, 58, 79, 0.04);
  --scrim: rgba(23, 28, 38, 0.32);
  --glass: rgba(255, 255, 255, 0.72);
  --glass-strong: rgba(255, 255, 255, 0.88);
  --toast: rgba(47, 58, 79, 0.96);
  --on-toast: #f2eeea;
  --toast-button: rgba(242, 238, 234, 0.08);
  --toast-button-hover: rgba(242, 238, 234, 0.14);
  --label: #2f3a4f;
  --label-2: #5d6677;
  --label-3: #646c7c;
  --separator: rgba(47, 58, 79, 0.12);
  --separator-strong: rgba(47, 58, 79, 0.24);
  --control-border: #808897;
  --action: #f6a68b;
  --action-hover: #f3977a;
  --action-pressed: #ee8866;
  --on-action: #2f3a4f;
  --keycap-on-action: rgba(47, 58, 79, 0.12);
  --action-ink: #a44529;
  --action-soft: #fce6dd;
  --action-soft-hover: #f9d8cb;
  --gap-soft-hover: #f8dce1;
  --focus-ring: #2f3a4f;
  --meets: #178a5c;
  --meets-ink: #0f6e47;
  --meets-soft: #e7f4ee;
  --partial: #e0951a;
  --partial-ink: #8f5600;
  --partial-soft: #fdf3e1;
  --gap: #c8243f;
  --gap-ink: #a61b33;
  --gap-soft: #fbe9ec;
  --unknown: #6b63dd;
  --unknown-ink: #4f48c2;
  --unknown-soft: #f0effc;
  --on-status: #ffffff;
  --na: #aeb4be;
  --na-ink: #5d6677;
  --na-soft: #f1f2f4;
  --verified: #1f4fb8;
  --observed: #0a7c8c;
  --declared: #75614a;
  --missing: var(--label-2);
  --success: var(--meets-ink);
  --warning: var(--partial-ink);
  --danger: var(--gap-ink);
  --shadow-1: 0 0.5px 1px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-2: 0 6px 20px -4px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.05);
  --shadow-3: 0 28px 70px -18px rgba(0,0,0,0.28), 0 0 0 0.5px rgba(0,0,0,0.07);
  --shadow-glass: 0 0 0 0.5px rgba(0,0,0,0.07), 0 12px 40px -14px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.9);
  --shadow-field: inset 0 0 0 0.5px rgba(47,58,79,0.24);
  --shadow-keycap: 0 0 0 0.5px rgba(47,58,79,0.24), 0 1px 0 rgba(47,58,79,0.24);
  --shadow-segment: 0 0 0 1px var(--segment-edge), 0 1px 3px rgba(0,0,0,0.12);
  --shadow-knob: 0 2px 5px rgba(0,0,0,0.18), 0 0 0 0.5px rgba(0,0,0,0.04);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #171c26;
    --surface: #222a39;
    --surface-sunken: #1c2230;
    --surface-raised: #2f3a4f;
    --sidebar: #11151d;
    --sidebar-label-2: #9aa2b0;
    --sidebar-active-fill: rgba(246, 166, 139, 0.12);
    --sidebar-hover: rgba(242, 238, 234, 0.10);
    --sidebar-fill: rgba(242, 238, 234, 0.06);
    --fill: rgba(242, 238, 234, 0.08);
    --fill-hover: rgba(242, 238, 234, 0.14);
    --segment-on: #3d4a63;
    --segment-edge: #8c96a7;
    --knob: #f2eeea;
    --row-hover: rgba(242, 238, 234, 0.05);
    --scrim: rgba(0, 0, 0, 0.5);
    --glass: rgba(34, 42, 57, 0.72);
    --glass-strong: rgba(47, 58, 79, 0.92);
    --toast: #3d4a63;
    --label: #f2eeea;
    --label-2: #b4bcc9;
    --label-3: #a0a8b6;
    --separator: rgba(242, 238, 234, 0.10);
    --separator-strong: rgba(242, 238, 234, 0.20);
    --control-border: #717b8c;
    --action-hover: #f8b39b;
    --action-pressed: #fac0ab;
    --on-action: #171c26;
    --keycap-on-action: rgba(23, 28, 38, 0.16);
    --action-ink: #f8b199;
    --action-soft: rgba(246, 166, 139, 0.12);
    --action-soft-hover: rgba(246, 166, 139, 0.18);
    --gap-soft-hover: rgba(240, 74, 106, 0.24);
    --focus-ring: #f2eeea;
    --meets: #3dbe86;
    --meets-ink: #6fd3a8;
    --meets-soft: rgba(61, 190, 134, 0.16);
    --partial: #f2b83a;
    --partial-ink: #f5c36e;
    --partial-soft: rgba(242, 184, 58, 0.16);
    --gap: #f04a6a;
    --gap-ink: #ff8a9b;
    --gap-soft: rgba(240, 74, 106, 0.16);
    --unknown: #9a94f2;
    --unknown-ink: #b7b2f7;
    --unknown-soft: rgba(154, 148, 242, 0.16);
    --on-status: #171c26;
    --na: #5e6778;
    --na-ink: #b4bcc9;
    --na-soft: rgba(242, 238, 234, 0.06);
    --verified: #8faef7;
    --observed: #4cc3d2;
    --declared: #c2aa8c;
    --shadow-1: 0 0 0 0.5px rgba(242,238,234,0.06);
    --shadow-2: 0 8px 24px -6px rgba(0,0,0,0.5), 0 0 0 0.5px rgba(242,238,234,0.08);
    --shadow-3: 0 28px 70px -18px rgba(0,0,0,0.7), 0 0 0 0.5px rgba(242,238,234,0.10);
    --shadow-glass: 0 0 0 0.5px rgba(242,238,234,0.08), 0 12px 40px -14px rgba(0,0,0,0.6);
    --shadow-field: inset 0 0 0 0.5px rgba(242,238,234,0.20);
    --shadow-keycap: 0 0 0 0.5px rgba(242,238,234,0.20), 0 1px 0 rgba(242,238,234,0.20);
    --shadow-segment: 0 0 0 1px var(--segment-edge), 0 1px 3px rgba(0,0,0,0.4);
    --shadow-knob: 0 2px 5px rgba(0,0,0,0.4);
    color-scheme: dark;
  }
}

[data-theme="dark"] {
  --ground: #171c26;
  --surface: #222a39;
  --surface-sunken: #1c2230;
  --surface-raised: #2f3a4f;
  --sidebar: #11151d;
  --sidebar-label-2: #9aa2b0;
  --sidebar-active-fill: rgba(246, 166, 139, 0.12);
  --sidebar-hover: rgba(242, 238, 234, 0.10);
  --sidebar-fill: rgba(242, 238, 234, 0.06);
  --fill: rgba(242, 238, 234, 0.08);
  --fill-hover: rgba(242, 238, 234, 0.14);
  --segment-on: #3d4a63;
  --segment-edge: #8c96a7;
  --knob: #f2eeea;
  --row-hover: rgba(242, 238, 234, 0.05);
  --scrim: rgba(0, 0, 0, 0.5);
  --glass: rgba(34, 42, 57, 0.72);
  --glass-strong: rgba(47, 58, 79, 0.92);
  --toast: #3d4a63;
  --label: #f2eeea;
  --label-2: #b4bcc9;
  --label-3: #a0a8b6;
  --separator: rgba(242, 238, 234, 0.10);
  --separator-strong: rgba(242, 238, 234, 0.20);
  --control-border: #717b8c;
  --action-hover: #f8b39b;
  --action-pressed: #fac0ab;
  --on-action: #171c26;
  --keycap-on-action: rgba(23, 28, 38, 0.16);
  --action-ink: #f8b199;
  --action-soft: rgba(246, 166, 139, 0.12);
  --action-soft-hover: rgba(246, 166, 139, 0.18);
  --gap-soft-hover: rgba(240, 74, 106, 0.24);
  --focus-ring: #f2eeea;
  --meets: #3dbe86;
  --meets-ink: #6fd3a8;
  --meets-soft: rgba(61, 190, 134, 0.16);
  --partial: #f2b83a;
  --partial-ink: #f5c36e;
  --partial-soft: rgba(242, 184, 58, 0.16);
  --gap: #f04a6a;
  --gap-ink: #ff8a9b;
  --gap-soft: rgba(240, 74, 106, 0.16);
  --unknown: #9a94f2;
  --unknown-ink: #b7b2f7;
  --unknown-soft: rgba(154, 148, 242, 0.16);
  --on-status: #171c26;
  --na: #5e6778;
  --na-ink: #b4bcc9;
  --na-soft: rgba(242, 238, 234, 0.06);
  --verified: #8faef7;
  --observed: #4cc3d2;
  --declared: #c2aa8c;
  --shadow-1: 0 0 0 0.5px rgba(242,238,234,0.06);
  --shadow-2: 0 8px 24px -6px rgba(0,0,0,0.5), 0 0 0 0.5px rgba(242,238,234,0.08);
  --shadow-3: 0 28px 70px -18px rgba(0,0,0,0.7), 0 0 0 0.5px rgba(242,238,234,0.10);
  --shadow-glass: 0 0 0 0.5px rgba(242,238,234,0.08), 0 12px 40px -14px rgba(0,0,0,0.6);
  --shadow-field: inset 0 0 0 0.5px rgba(242,238,234,0.20);
  --shadow-keycap: 0 0 0 0.5px rgba(242,238,234,0.20), 0 1px 0 rgba(242,238,234,0.20);
  --shadow-segment: 0 0 0 1px var(--segment-edge), 0 1px 3px rgba(0,0,0,0.4);
  --shadow-knob: 0 2px 5px rgba(0,0,0,0.4);
  color-scheme: dark;
}

:root {
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-56: 56px;
  --space-72: 72px;
  --radius-keycap: 6px;
  --radius-item: 8px;
  --radius-control: 10px;
  --radius-field: 12px;
  --radius-menu: 14px;
  --radius-list: 16px;
  --radius-card: 18px;
  --radius-panel: 22px;
  --radius-pill: 999px;
  --control-xs: 28px;
  --control-sm: 32px;
  --control: 36px;
  --control-lg: 44px;
  --control-xl: 50px;
  --row: 56px;
  --sidebar-width: 256px;
  --sidebar-collapsed: 84px;
  --inspector-width: 340px;
  --content-max: 1240px;
  --content-max-wide: 1600px;
  --measure: 64ch;
  --duration-press: 120ms;
  --duration-quick: 160ms;
  --duration-pop: 200ms;
  --duration-state: 240ms;
  --duration-rise: 320ms;
  --duration-grow: 520ms;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-press: cubic-bezier(0.2, 0.8, 0.2, 1);
  --blur: blur(28px) saturate(180%);
  --disabled-opacity: 0.4;
  --font-sans: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif: Newsreader, ui-serif, Georgia, serif;
}

.large-title {
  font-family: var(--font-sans);
  font-size: 2.125rem;
  line-height: 1.1177;
  font-weight: 700;
  letter-spacing: -0.022em;
}

.title-1 {
  font-family: var(--font-sans);
  font-size: 1.75rem;
  line-height: 1.2143;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.title-2 {
  font-family: var(--font-sans);
  font-size: 1.375rem;
  line-height: 1.2728;
  font-weight: 700;
  letter-spacing: -0.018em;
}

.title-3 {
  font-family: var(--font-sans);
  font-size: 1.1875rem;
  line-height: 1.2632;
  font-weight: 600;
  letter-spacing: -0.012em;
}

.big-number {
  font-family: var(--font-sans);
  font-size: 2.125rem;
  line-height: 1.1177;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-feature-settings: "tnum" 1;
}

.body-large {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.4118;
  font-weight: 400;
}

.callout {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.4375;
  font-weight: 400;
}

.headline {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.3334;
  font-weight: 600;
}

.body {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.4667;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.subheadline {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.4286;
  font-weight: 400;
}

.footnote {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  line-height: 1.3847;
  font-weight: 400;
}

.badge {
  font-family: var(--font-sans);
  font-size: 0.78125rem;
  line-height: 1.28;
  font-weight: 600;
}

.caption {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.3334;
  font-weight: 500;
}

.code {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.5385;
  font-weight: 400;
}

.quote {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.4375;
  font-weight: 400;
}