@font-face {
    font-family: "Geist";
    src: url("../fonts/Geist-Bold.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/IBMPlexSans-Regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Geist Mono";
    src: url("../fonts/GeistMono-Medium.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

:root {
    color-scheme: dark;
    --color-paper: oklch(14% 0.025 250);
    --color-paper-2: oklch(18% 0.030 250);
    --color-paper-3: oklch(22% 0.034 250);
    --color-canvas: var(--color-paper);
    --color-surface: var(--color-paper-2);
    --color-surface-raised: var(--color-paper-3);
    --color-ink: oklch(95% 0.012 245);
    --color-ink-2: oklch(78% 0.025 245);
    --color-muted: oklch(66% 0.025 245);
    --color-rule: oklch(31% 0.035 250);
    --color-rule-strong: oklch(40% 0.050 250);
    --color-accent: #2a72b0;
    --color-accent-fill: #2a72b0;
    --color-action-highlight: #2e76b2;
    --color-action-depth: #205b8f;
    --color-accent-soft: #18344b;
    --color-table-head: oklch(20% 0.028 245);
    --color-row-hover: oklch(23% 0.040 245);
    --color-control-hover: oklch(24% 0.032 245);
    --color-action-soft: oklch(22% 0.045 245);
    --color-action-soft-hover: oklch(27% 0.070 245);
    --color-action-soft-border: #477da9;
    --color-code-soft: oklch(23% 0.040 245);
    --color-accent-ink: oklch(98% 0.008 250);
    --color-focus: #69afe8;
    --color-success: #5c9fd6;
    --color-success-soft: #18344b;
    --color-status-active: #75c995;
    --color-status-active-soft: #183326;
    --color-info: oklch(68% 0.160 250);
    --color-info-soft: oklch(26% 0.050 250);
    --color-warning: oklch(78% 0.155 75);
    --color-warning-soft: oklch(27% 0.045 75);
    --color-danger: oklch(66% 0.205 28);
    --color-danger-fill: oklch(56% 0.180 28);
    --color-danger-soft: #26313b;
    --color-chart-1: #2a72b0;
    --color-chart-2: oklch(68% 0.160 250);
    --color-chart-3: #78a9cf;
    --color-chart-4: oklch(78% 0.155 75);
    --color-map-base: oklch(34% 0.045 250);
    --color-map-stroke: oklch(48% 0.065 250);
    --color-rail: oklch(10.5% 0.026 250);
    --color-rail-surface: oklch(17% 0.036 250);
    --color-rail-ink: oklch(96% 0.010 245);
    --color-rail-muted: oklch(69% 0.026 245);
    --color-rail-rule: oklch(29% 0.045 250);
    --color-caret: var(--color-focus);
    --color-scrollbar-thumb: var(--color-rule-strong);
    --color-scrollbar-track: var(--color-paper-2);
    --color-canvas-accent-fallback: #2a72b0;
    --color-canvas-danger-fallback: #d95f67;
    --color-canvas-paper-fallback: #101a24;
    --color-canvas-rule-fallback: #223242;
    --color-canvas-muted-fallback: #8694a1;
    --rule-width: .0625rem;
    --rule-width-strong: .09375rem;
    --shadow-contact: 0 1px 2px oklch(5% 0.02 250 / .28), inset 0 1px 0 oklch(100% 0 0 / .05);
    --shadow-control: var(--shadow-contact);
    --shadow-action: 0 .25rem .75rem color-mix(in oklch, var(--color-accent-fill) 20%, transparent), inset 0 1px 0 color-mix(in oklch, var(--color-accent-ink) 18%, transparent);
    --shadow-action-hover: 0 .375rem 1rem color-mix(in oklch, var(--color-accent-fill) 27%, transparent), inset 0 1px 0 color-mix(in oklch, var(--color-accent-ink) 22%, transparent);
    --shadow-danger-action: 0 .25rem .75rem color-mix(in oklch, var(--color-danger-fill) 20%, transparent), inset 0 1px 0 color-mix(in oklch, var(--color-accent-ink) 16%, transparent);
    --shadow-surface: 0 .125rem .25rem oklch(5% 0.02 250 / .14), 0 .75rem 2.25rem oklch(5% 0.02 250 / .14), inset 0 1px 0 oklch(100% 0 0 / .035);
    --shadow-floating: 0 .25rem .75rem oklch(5% 0.02 250 / .18), 0 1.5rem 4rem oklch(5% 0.02 250 / .2), inset 0 1px 0 oklch(100% 0 0 / .055);
    --gradient-action: linear-gradient(135deg, var(--color-action-highlight) 0%, var(--color-accent-fill) 52%, var(--color-action-depth) 100%);
    --gradient-control: linear-gradient(180deg, color-mix(in oklch, var(--color-paper-3) 80%, var(--color-ink) 3%) 0%, var(--color-paper-3) 100%);
    --gradient-danger-soft: linear-gradient(180deg, var(--color-paper-3) 0%, var(--color-danger-soft) 100%);
    --gradient-danger-action: linear-gradient(135deg, color-mix(in oklch, var(--color-danger-fill) 88%, var(--color-accent-ink)) 0%, var(--color-danger-fill) 52%, color-mix(in oklch, var(--color-danger-fill) 82%, var(--color-paper)) 100%);
    --font-display: "Geist", "IBM Plex Sans", system-ui, sans-serif;
    --font-body: "IBM Plex Sans", system-ui, sans-serif;
    --font-mono: "Geist Mono", "SFMono-Regular", Consolas, monospace;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-size-xs: .75rem;
    --font-size-sm: .875rem;
    --font-size-title: 1rem;
    --font-size-display: clamp(1.75rem, 4vw, 2rem);
    --font-size-heading: clamp(1.125rem, 2.5vw, 1.375rem);
    --font-size-metric: clamp(1.75rem, 4vw, 2rem);
    --font-size-metric-compact: clamp(1.25rem, 3vw, 1.5rem);
    --line-height-body: 1.5;
    --line-height-tight: 1.12;
    --line-height-control: 1.2;
    --line-height-flat: 1;
    --tracking-display: -.03em;
    --tracking-label: .035em;
    --underline-offset: .2em;
    --measure-copy: 72ch;
    --space-3xs: .125rem;
    --space-2xs: .25rem;
    --space-xs: .5rem;
    --space-sm: .75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --radius-control: .625rem;
    --radius-message: .75rem;
    --radius-surface: .875rem;
    --radius-card: 1rem;
    --radius-pill: 999px;
    --focus-ring-width: .1875rem;
    --target-min: 2.75rem;
    --size-button: 2.5rem;
    --size-button-compact: 2.25rem;
    --size-button-icon: 1rem;
    --space-button-inline: .875rem;
    --space-button-inline-compact: .6875rem;
    --space-button-gap: .4375rem;
    --size-page-min: 20rem;
    --size-visually-hidden: 1px;
    --size-icon: 1.25rem;
    --size-mobile-bar: 4rem;
    --size-brand-mark: 2.25rem;
    --size-side-rail-mobile: 19rem;
    --size-side-rail-desktop: 14rem;
    --size-side-rail-collapsed: 4.5rem;
    --size-content-max: 78rem;
    --size-link-table-min: 52rem;
    --size-auth-max: 28rem;
    --size-metric-min: 15rem;
    --size-field-min: 10rem;
    --size-break-word-min: 10rem;
    --size-break-word-max: 28rem;
    --size-pre-max: 32rem;
    --size-status: 1.75rem;
    --size-status-signal: .4375rem;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in: cubic-bezier(.7, 0, .84, 0);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --dur-micro: 120ms;
    --dur-short: 220ms;
    --dur-long: 420ms;
    --dur-reduced: .01ms;
    --z-base: 1;
    --z-navigation: 20;
    --z-toast: 90;
    --z-skip-link: 100;
}

:root[data-theme="light"] {
    color-scheme: light;
    --color-paper: oklch(97.2% 0.009 250);
    --color-paper-2: oklch(99.7% 0.003 250);
    --color-paper-3: oklch(94.8% 0.014 250);
    --color-canvas: var(--color-paper);
    --color-surface: var(--color-paper-2);
    --color-surface-raised: oklch(100% 0 0);
    --color-ink: oklch(20% 0.032 250);
    --color-ink-2: oklch(35% 0.034 250);
    --color-muted: oklch(47% 0.028 250);
    --color-rule: oklch(85.2% 0.019 250);
    --color-rule-strong: oklch(71% 0.036 250);
    --color-accent: #2a72b0;
    --color-accent-fill: #2a72b0;
    --color-action-highlight: #2d75ad;
    --color-action-depth: #1f588a;
    --color-accent-soft: #e7f1f9;
    --color-table-head: oklch(96% 0.012 245);
    --color-row-hover: oklch(95% 0.025 245);
    --color-control-hover: oklch(95% 0.018 245);
    --color-action-soft: oklch(95% 0.028 245);
    --color-action-soft-hover: oklch(91.5% 0.055 245);
    --color-action-soft-border: #77a9cf;
    --color-code-soft: oklch(95% 0.022 245);
    --color-accent-ink: oklch(99% 0.004 250);
    --color-focus: #2a72b0;
    --color-success: #2a72b0;
    --color-success-soft: #e7f1f9;
    --color-status-active: #216e39;
    --color-status-active-soft: #e8f5ec;
    --color-info: oklch(50% 0.155 250);
    --color-info-soft: oklch(94% 0.028 250);
    --color-warning: oklch(47% 0.145 67);
    --color-warning-soft: oklch(95% 0.035 75);
    --color-danger: oklch(50% 0.200 28);
    --color-danger-fill: oklch(48% 0.185 28);
    --color-danger-soft: #f1f4f7;
    --color-chart-1: #2a72b0;
    --color-chart-2: oklch(52% 0.155 250);
    --color-chart-3: #5f95bf;
    --color-chart-4: oklch(60% 0.150 75);
    --color-map-base: oklch(82.5% 0.042 250);
    --color-map-stroke: var(--color-paper-2);
    --color-rail: oklch(11% 0.030 250);
    --color-rail-surface: oklch(18% 0.040 250);
    --color-rail-ink: oklch(97% 0.008 245);
    --color-rail-muted: oklch(72% 0.026 245);
    --color-rail-rule: oklch(30% 0.050 250);
    --color-caret: var(--color-accent);
    --color-scrollbar-thumb: oklch(63% 0.035 250);
    --color-scrollbar-track: var(--color-paper-3);
    --color-canvas-accent-fallback: #2a72b0;
    --color-canvas-danger-fallback: #b83b46;
    --color-canvas-paper-fallback: #ffffff;
    --color-canvas-rule-fallback: #c1cbd5;
    --color-canvas-muted-fallback: #5f6d7a;
    --shadow-contact: 0 1px 2px oklch(25% 0.04 250 / .1), inset 0 1px 0 oklch(100% 0 0 / .9);
    --shadow-control: var(--shadow-contact);
    --shadow-action: 0 .25rem .75rem color-mix(in oklch, var(--color-accent-fill) 16%, transparent), inset 0 1px 0 color-mix(in oklch, var(--color-accent-ink) 26%, transparent);
    --shadow-action-hover: 0 .375rem 1rem color-mix(in oklch, var(--color-accent-fill) 22%, transparent), inset 0 1px 0 color-mix(in oklch, var(--color-accent-ink) 30%, transparent);
    --shadow-danger-action: 0 .25rem .75rem color-mix(in oklch, var(--color-danger-fill) 16%, transparent), inset 0 1px 0 color-mix(in oklch, var(--color-accent-ink) 24%, transparent);
    --shadow-surface: 0 1px 2px oklch(32% 0.035 250 / .045), 0 .75rem 2.25rem oklch(32% 0.035 250 / .065), inset 0 1px 0 oklch(100% 0 0 / .9);
    --shadow-floating: 0 .25rem .75rem oklch(32% 0.035 250 / .08), 0 1.5rem 4rem oklch(32% 0.035 250 / .1), inset 0 1px 0 oklch(100% 0 0 / .95);
}