@font-face {
    font-family: "Inter";
    src: url("fonts/InterVariable.woff2?v=0.2.0") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    color-scheme: light dark;

    /* Colors */
    --color-canvas: #f5f7fa;
    --color-surface: #ffffff;
    --color-surface-subtle: #f0f3f7;
    --color-surface-elevated: rgba(255, 255, 255, 0.92);
    --color-text: #171a21;
    --color-text-muted: #667085;
    --color-text-subtle: #98a2b3;
    --color-border: #e4e7ec;
    --color-border-strong: #d0d5dd;
    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-primary-soft: #eff6ff;
    --color-success: #16803d;
    --color-success-soft: #ecfdf3;
    --color-warning: #b54708;
    --color-warning-soft: #fffaeb;
    --color-danger: #b42318;
    --color-danger-hover: #912018;
    --color-danger-soft: #fef3f2;
    --color-info: #175cd3;
    --color-info-soft: #eff8ff;
    --color-focus: rgba(37, 99, 235, 0.25);
    --color-overlay: rgba(16, 24, 40, 0.48);

    /* Spacing — 4px base */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* Radius */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-2xl: 2rem;
    --radius-full: 999px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-sm: 0 2px 8px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 12px 28px rgba(16, 24, 40, 0.08);
    --shadow-lg: 0 24px 56px rgba(16, 24, 40, 0.12);

    /* Typography */
    --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: clamp(1.875rem, 4vw, 2.5rem);
    --font-size-4xl: clamp(2.25rem, 7vw, 3.5rem);
    --line-tight: 1.15;
    --line-normal: 1.5;
    --line-relaxed: 1.65;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Z-index */
    --z-base: 0;
    --z-sticky: 20;
    --z-dropdown: 40;
    --z-overlay: 60;
    --z-modal: 80;
    --z-toast: 100;

    /* Motion */
    --duration-fast: 120ms;
    --duration-normal: 200ms;
    --duration-slow: 320ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);

    --sidebar-width: 16rem;
    --content-max: 74rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-canvas: #0d1016;
        --color-surface: #171b23;
        --color-surface-subtle: #202630;
        --color-surface-elevated: rgba(23, 27, 35, 0.94);
        --color-text: #f2f4f7;
        --color-text-muted: #a9b1bf;
        --color-text-subtle: #7d8797;
        --color-border: #2b3240;
        --color-border-strong: #3b4556;
        --color-primary: #6ea0ff;
        --color-primary-hover: #8bb3ff;
        --color-primary-soft: #172747;
        --color-success: #75d397;
        --color-success-soft: #123321;
        --color-warning: #f3b66e;
        --color-warning-soft: #3b2812;
        --color-danger: #ff8b83;
        --color-danger-hover: #ffaaa4;
        --color-danger-soft: #411c1c;
        --color-info: #84adff;
        --color-info-soft: #172b4d;
        --color-focus: rgba(110, 160, 255, 0.3);
        --color-overlay: rgba(0, 0, 0, 0.68);
        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
        --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.24);
        --shadow-md: 0 12px 28px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.38);
    }
}

*, *::before, *::after { box-sizing: border-box; }

html {
    min-height: 100%;
    background: var(--color-canvas);
    font-family: var(--font-sans);
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--color-text);
    background: var(--color-canvas);
    font-size: var(--font-size-md);
    line-height: var(--line-normal);
}

button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img, svg { display: block; }

:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

::selection { color: #fff; background: var(--color-primary); }

h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { color: var(--color-text); line-height: var(--line-tight); letter-spacing: -0.025em; }
h1 { margin-bottom: var(--space-3); font-size: var(--font-size-4xl); font-weight: var(--weight-bold); }
h2 { margin-bottom: var(--space-3); font-size: var(--font-size-2xl); font-weight: var(--weight-semibold); }
h3 { margin-bottom: var(--space-2); font-size: var(--font-size-lg); font-weight: var(--weight-semibold); }
p { margin-bottom: var(--space-4); }

.text-display { font-size: var(--font-size-4xl); font-weight: var(--weight-bold); line-height: var(--line-tight); letter-spacing: -0.04em; }
.text-title { font-size: var(--font-size-3xl); font-weight: var(--weight-bold); line-height: var(--line-tight); letter-spacing: -0.035em; }
.text-heading { font-size: var(--font-size-2xl); font-weight: var(--weight-semibold); line-height: 1.25; }
.text-body { font-size: var(--font-size-md); line-height: var(--line-relaxed); }
.text-small { font-size: var(--font-size-sm); line-height: var(--line-normal); }
.text-caption { font-size: var(--font-size-xs); line-height: var(--line-normal); }
.text-muted, .muted { color: var(--color-text-muted); }
.eyebrow {
    margin-bottom: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.icon { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; stroke-width: 2; }
.icon--sm { width: 1rem; height: 1rem; }
.icon--lg { width: 1.5rem; height: 1.5rem; }

/* Layout */
.app-shell { min-height: 100vh; }
.app-main { min-width: 0; padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
.content-container { width: min(100% - 2rem, var(--content-max)); margin-inline: auto; padding-block: var(--space-6) var(--space-12); }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-8); }
.page-header__copy { min-width: 0; }
.page-header__copy p:last-child { margin-bottom: 0; }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.grid { display: grid; gap: var(--space-4); }
.grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
.section { margin-bottom: var(--space-10); }

/* Sidebar and navigation */
.sidebar {
    display: none;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: var(--z-sticky);
    width: var(--sidebar-width);
    padding: var(--space-6) var(--space-4);
    border-right: 1px solid var(--color-border);
    background: var(--color-surface-elevated);
    backdrop-filter: blur(18px);
}

.sidebar__inner { display: flex; min-height: 100%; flex-direction: column; }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-text); text-decoration: none; font-weight: var(--weight-semibold); }
.brand__mark { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: var(--radius-md); color: #fff; background: var(--color-primary); box-shadow: var(--shadow-sm); }
.brand__meta { display: block; color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: var(--weight-medium); }
.sidebar__nav { margin-top: var(--space-8); }
.nav-list { display: flex; margin: 0; padding: 0; flex-direction: column; gap: var(--space-1); list-style: none; }
.nav-link { display: flex; min-height: 2.75rem; align-items: center; gap: var(--space-3); padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--color-text-muted); text-decoration: none; font-size: var(--font-size-sm); font-weight: var(--weight-medium); transition: color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); }
.nav-link:hover { color: var(--color-text); background: var(--color-surface-subtle); }
.nav-link[aria-current="page"] { color: var(--color-primary); background: var(--color-primary-soft); }
.sidebar__footer { margin-top: auto; padding: var(--space-4) var(--space-3) 0; color: var(--color-text-subtle); font-size: var(--font-size-xs); }

.mobile-nav { position: fixed; inset: auto var(--space-3) max(var(--space-3), env(safe-area-inset-bottom)) var(--space-3); z-index: var(--z-sticky); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-1); padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface-elevated); box-shadow: var(--shadow-lg); backdrop-filter: blur(18px); }
.mobile-nav .nav-link { min-height: 3.25rem; flex-direction: column; justify-content: center; gap: 0.15rem; padding: var(--space-1); font-size: 0.6875rem; }

/* Buttons */
.btn {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0 var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: #fff;
    background: var(--color-primary);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transition: transform var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.btn:hover:not(:disabled) { background: var(--color-primary-hover); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.48; }
.btn--secondary { color: var(--color-text); border-color: var(--color-border-strong); background: var(--color-surface); }
.btn--secondary:hover:not(:disabled) { background: var(--color-surface-subtle); }
.btn--ghost { color: var(--color-text-muted); background: transparent; box-shadow: none; }
.btn--ghost:hover:not(:disabled) { color: var(--color-text); background: var(--color-surface-subtle); box-shadow: none; }
.btn--danger { color: #fff; background: var(--color-danger); }
.btn--danger:hover:not(:disabled) { background: var(--color-danger-hover); }
.btn--sm { min-height: 2.25rem; padding-inline: var(--space-3); font-size: var(--font-size-sm); }
.btn--lg { min-height: 3.25rem; padding-inline: var(--space-6); }
.btn--icon { width: 2.75rem; padding: 0; }
.btn--block { width: 100%; }

/* Cards */
.card { padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-xs); }
.card--elevated { border-color: transparent; box-shadow: var(--shadow-md); }
.card--subtle { background: var(--color-surface-subtle); box-shadow: none; }
.card--interactive { color: inherit; text-decoration: none; transition: transform var(--duration-normal) var(--ease-standard), border-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard); }
.card--interactive:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.card__header > :last-child, .card > :last-child { margin-bottom: 0; }

/* Forms */
.field { display: grid; gap: var(--space-2); }
.field + .field { margin-top: var(--space-4); }
.field__label { color: var(--color-text); font-size: var(--font-size-sm); font-weight: var(--weight-semibold); }
.field__hint { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.field__error { margin: 0; color: var(--color-danger); font-size: var(--font-size-xs); }
.input, .select, .textarea {
    width: 100%;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-text);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
    outline: none;
    transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.input, .select { min-height: 2.875rem; padding: 0 var(--space-3); }
.textarea { min-height: 7.5rem; padding: var(--space-3); resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--color-text-subtle); }
.input:hover:not(:disabled), .select:hover:not(:disabled), .textarea:hover:not(:disabled) { border-color: var(--color-text-subtle); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-focus); }
.input:disabled, .select:disabled, .textarea:disabled { cursor: not-allowed; color: var(--color-text-subtle); background: var(--color-surface-subtle); opacity: 0.75; }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--color-danger); }
.checkbox { display: inline-flex; align-items: flex-start; gap: var(--space-3); color: var(--color-text); cursor: pointer; font-size: var(--font-size-sm); }
.checkbox input { width: 1.125rem; height: 1.125rem; margin: 0.15rem 0 0; accent-color: var(--color-primary); }
.checkbox input:disabled + span { color: var(--color-text-subtle); cursor: not-allowed; }

/* Badges and alerts */
.badge { display: inline-flex; min-height: 1.5rem; align-items: center; gap: var(--space-1); padding: 0 var(--space-2); border-radius: var(--radius-full); color: var(--color-text-muted); background: var(--color-surface-subtle); font-size: var(--font-size-xs); font-weight: var(--weight-semibold); white-space: nowrap; }
.badge--primary, .badge--info { color: var(--color-info); background: var(--color-info-soft); }
.badge--success { color: var(--color-success); background: var(--color-success-soft); }
.badge--warning { color: var(--color-warning); background: var(--color-warning-soft); }
.badge--danger { color: var(--color-danger); background: var(--color-danger-soft); }

.alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border: 1px solid color-mix(in srgb, var(--color-info) 20%, transparent); border-radius: var(--radius-lg); color: var(--color-info); background: var(--color-info-soft); font-size: var(--font-size-sm); }
.alert p { margin: 0; }
.alert__title { display: block; margin-bottom: var(--space-1); color: inherit; font-weight: var(--weight-semibold); }
.alert--success { color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 20%, transparent); background: var(--color-success-soft); }
.alert--warning { color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 20%, transparent); background: var(--color-warning-soft); }
.alert--danger { color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 20%, transparent); background: var(--color-danger-soft); }

/* KPI */
.kpi-card { display: grid; gap: var(--space-4); min-height: 10.5rem; }
.kpi-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.kpi-card__icon { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border-radius: var(--radius-md); color: var(--color-primary); background: var(--color-primary-soft); }
.kpi-card__value { margin: 0; font-size: var(--font-size-3xl); font-weight: var(--weight-bold); letter-spacing: -0.04em; line-height: 1; }
.kpi-card__label { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.kpi-card__trend { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: var(--weight-medium); }
.kpi-card__trend--positive { color: var(--color-success); }
.kpi-card__trend--warning { color: var(--color-warning); }

/* Login */
.auth-shell { display: grid; min-height: 100vh; padding: max(var(--space-6), env(safe-area-inset-top)) var(--space-4) max(var(--space-6), env(safe-area-inset-bottom)); place-items: center; }
.auth-card { width: min(100%, 27rem); padding: var(--space-8); border: 1px solid var(--color-border); border-radius: var(--radius-2xl); background: var(--color-surface-elevated); box-shadow: var(--shadow-lg); backdrop-filter: blur(18px); }
.auth-card__brand { margin-bottom: var(--space-8); }
.auth-card__footer { margin: var(--space-6) 0 0; color: var(--color-text-subtle); font-size: var(--font-size-xs); text-align: center; }

/* Styleguide */
.styleguide-section { scroll-margin-top: var(--space-6); }
.styleguide-section + .styleguide-section { margin-top: var(--space-16); }
.styleguide-heading { padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-6); }
.styleguide-spaced { margin-top: var(--space-6); }
.component-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.component-row + .component-row { margin-top: var(--space-4); }
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--space-3); }
.swatch { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.swatch__color { height: 4.5rem; background: var(--swatch); }
.swatch__color--primary { --swatch: var(--color-primary); }
.swatch__color--success { --swatch: var(--color-success); }
.swatch__color--warning { --swatch: var(--color-warning); }
.swatch__color--danger { --swatch: var(--color-danger); }
.swatch__color--surface { --swatch: var(--color-surface); }
.swatch__color--text { --swatch: var(--color-text); }
.swatch__label { padding: var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-xs); }
.token-scale { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-4); }
.token-scale__item { display: grid; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-xs); text-align: center; }
.token-scale__bar { width: var(--size); height: var(--size); min-width: 0.25rem; min-height: 0.25rem; border-radius: var(--radius-sm); background: var(--color-primary); }
.token-scale__bar--1 { --size: var(--space-1); }
.token-scale__bar--2 { --size: var(--space-2); }
.token-scale__bar--4 { --size: var(--space-4); }
.token-scale__bar--6 { --size: var(--space-6); }
.token-scale__bar--8 { --size: var(--space-8); }
.token-scale__bar--12 { --size: var(--space-12); }
.navigation-demo { width: min(100%, 20rem); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }

.app-footer { padding: 0 var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom)); color: var(--color-text-subtle); font-size: var(--font-size-xs); text-align: center; }

@media (min-width: 40rem) {
    .content-container { width: min(100% - 3rem, var(--content-max)); padding-top: var(--space-8); }
    .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .card { padding: var(--space-6); }
}

@media (min-width: 64rem) {
    .sidebar { display: block; }
    .mobile-nav { display: none; }
    .app-main, .app-footer { margin-left: var(--sidebar-width); }
    .app-main { padding-bottom: 0; }
    .content-container { width: min(100% - 4rem, var(--content-max)); padding-block: var(--space-10) var(--space-16); }
    .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}