/* DO NOT EDIT — generated from KDS2. Run sync.sh to update. */
@layer kds, app;

@layer kds {

/* ============================================================
   FONT FACES
   ============================================================ */

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('fonts/SpaceGrotesk-Variable.woff2') format('woff2');
}

/* ============================================================
   TOKENS
   ============================================================ */

:root {
    color-scheme: light;

    /* -- Surfaces — warm off-whites -- */
    --bg: #f7f7f5;
    --surface-1: #ffffff;
    --surface-2: #f0f0ed;
    --surface-3: #e8e8e4;
    --surface-4: #dfdfd9;
    --surface-5: #d5d5cf;
    --prism-face-1: #e8e8e4;
    --prism-face-2: #f0f0ed;

    /* -- Text -- */
    --text-primary: #1a1d21;
    --text-secondary: #4a4e54;
    --text-tertiary: #6b6f75;

    /* -- Accent — darker saturated mint for contrast on white -- */
    --accent: #198548;
    --accent-dim: rgba(25, 133, 72, 0.15);
    --accent-strong: #0e6e36;
    --accent-muted: #2da860;
    --on-accent: #ffffff;

    /* -- Pastels — 10-15% deeper to avoid washed-out on light bg -- */
    --pastel-sky: #5bb8e8;
    --pastel-pink: #e8899a;
    --pastel-yellow: #d4b44e;
    --pastel-mint: #3cba6e;
    --pastel-lavender: #9e85d6;

    /* -- Semantic -- */
    --positive: #1a9e42;
    --negative: #d42a20;
    --warning: #c77800;
    --record: #b89800;
    --info: #2563eb;

    /* -- Semantic tonal (8% tint for subtle backgrounds) -- */
    --positive-tonal: rgba(26, 158, 66, 0.07);
    --positive-glow: rgba(26, 158, 66, 0.12);
    --negative-tonal: rgba(212, 42, 32, 0.07);
    --negative-glow: rgba(212, 42, 32, 0.10);
    --warning-tonal: rgba(199, 120, 0, 0.07);
    --warning-glow: rgba(199, 120, 0, 0.10);

    /* -- Semantic containers -- */
    --positive-container: #d5f5e0;
    --on-positive-container: #0e5c2e;
    --negative-container: #fcd8d6;
    --on-negative-container: #8a1a1e;
    --warning-container: #fef3c7;
    --on-warning-container: #6b4e00;
    --accent-container: #d5f5e0;
    --on-accent-container: #0e5c2e;
    --record-container: #fef9c3;
    --on-record-container: #614e00;
    --info-container: #dbeafe;
    --on-info-container: #1e3a5f;

    /* -- Semantic outlines -- */
    --positive-outline: rgba(26, 158, 66, 0.25);
    --warning-outline: rgba(199, 120, 0, 0.25);
    --negative-outline: rgba(212, 42, 32, 0.25);
    --info-outline: rgba(37, 99, 235, 0.25);

    /* -- Borders -- */
    --divider: rgba(0, 0, 0, 0.06);
    --border: rgba(0, 0, 0, 0.12);
    --outline: #c0c4c8;
    --outline-variant: #dce0e4;

    /* -- Scrim & glass -- */
    --scrim: rgba(0, 0, 0, 0.40);
    --scrim-strong: rgba(0, 0, 0, 0.70);
    --surface-glass: rgba(255, 255, 255, 0.72);
    --surface-glass-border: rgba(0, 0, 0, 0.08);

    /* -- M3 tonal containers — light-tinted pastels with dark text -- */
    --primary-container: #d5f5e0;
    --on-primary-container: #0e5c2e;
    --secondary-container: #d6eef8;
    --on-secondary-container: #0a4a62;
    --tertiary-container: #ebe4f5;
    --on-tertiary-container: #3e2e60;
    --error-container: #fcd8d6;
    --on-error-container: #8a1a1e;

    /* -- Inverse (for snackbars, tooltips on light bg) -- */
    --inverse-surface: #2c3230;
    --inverse-on-surface: #edf2ef;

    /* -- Typography — Space Grotesk -- */
    --font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-family-mono: "JetBrains Mono", "SF Mono", "Fira Code", ui-monospace, monospace;
    --font-family-serif: "Newsreader", Georgia, serif;

    --font-display: 3rem;
    --font-headline: 2rem;
    --font-title: 1.375rem;
    --font-body: 1rem;
    --font-caption: 0.875rem;
    --font-label: 0.75rem;

    --weight-display: 700;
    --weight-headline: 700;
    --weight-title: 600;
    --weight-body: 400;
    --weight-caption: 500;
    --weight-label: 600;

    --leading-display: 1.05;
    --leading-headline: 1.15;
    --leading-title: 1.25;
    --leading-body: 1.5;
    --leading-caption: 1.4;
    --leading-label: 1.3;

    --tracking-display: -0.035em;
    --tracking-headline: -0.015em;
    --tracking-title: -0.01em;
    --tracking-caption: 0.01em;
    --tracking-label: 0.02em;

    /* -- Spacing (4px base grid) -- */
    --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-20: 80px;
    --space-24: 96px;

    /* -- Shape — M3 Expressive radii -- */
    --radius-none: 0px;
    --radius-xxs: 4px;
    --radius-compact: 6px;
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-soft: 14px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-xxl: 32px;
    --radius-xxxl: 48px;
    --radius-full: 9999px;

    /* -- Elevation — M3 dual-layer shadows -- */
    --elevation-0: none;
    --elevation-1: 0px 1px 2px 0px rgb(0 0 0 / 30%), 0px 1px 3px 1px rgb(0 0 0 / 15%);
    --elevation-2: 0px 1px 2px 0px rgb(0 0 0 / 30%), 0px 2px 6px 2px rgb(0 0 0 / 15%);
    --elevation-3: 0px 1px 3px 0px rgb(0 0 0 / 30%), 0px 4px 8px 3px rgb(0 0 0 / 15%);
    --elevation-4: 0px 2px 3px 0px rgb(0 0 0 / 30%), 0px 6px 10px 4px rgb(0 0 0 / 15%);
    --elevation-5: 0px 4px 4px 0px rgb(0 0 0 / 30%), 0px 8px 12px 6px rgb(0 0 0 / 15%);
    --focus-glow: 0 0 0 3px rgba(25, 133, 72, 0.25);
    --hero-glow: 0 8px 24px rgba(25, 133, 72, 0.08);

    /* -- Motion -- */
    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --duration-medium: 250ms;
    --duration-slow: 350ms;
    --duration-enter: 400ms;
    --duration-long: 500ms;
    --easing-standard: cubic-bezier(0.2, 0, 0, 1);
    --easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
    --easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
    --easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
    --easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* -- State layers -- */
    --state-hover: 0.15;
    --state-focus: 0.15;
    --state-pressed: 0.20;
    --state-dragged: 0.16;
    --opacity-disabled-content: 0.38;
    --opacity-disabled-container: 0.12;

    /* -- Layout -- */
    --content-width: 65ch;
    --z-dropdown: 100;
    --z-modal: 200;
    --z-toast: 300;
    --icon-sm: 16px;
    --icon-md: 20px;
    --icon-lg: 24px;
    --icon-xl: 32px;

    /* -- Responsive breakpoints -- */
    --bp-mobile: 640px;
    --bp-tablet: 1024px;
    --bp-desktop: 1280px;

    /* -- Data visualisation palette -- */
    --chart-1: #2563eb;
    --chart-2: #16a34a;
    --chart-3: #ca8a04;
    --chart-4: #dc2626;
    --chart-5: #9333ea;
    --chart-6: #0d9488;
    --chart-7: #ea580c;
    --chart-8: #db2777;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    /* -- Surfaces — rich charcoal, not flat black -- */
    --bg: #0c0e10;
    --surface-1: #111416;
    --surface-2: #171a1d;
    --surface-3: #1d2023;
    --surface-4: #22262a;
    --surface-5: #282d31;
    --prism-face-1: #1d2023;
    --prism-face-2: #171a1d;

    /* -- Text -- */
    --text-primary: #e3e6ea;
    --text-secondary: #a8abb0;
    --text-tertiary: #7d8186;

    /* -- Accent — mint green primary -- */
    --accent: #B4F8CC;
    --accent-dim: rgba(180, 248, 204, 0.15);
    --accent-strong: #dcffe5;
    --accent-muted: #a0e3b8;
    --on-accent: #00382e;

    /* -- Pastels -- */
    --pastel-sky: #A3DDF6;
    --pastel-pink: #FFC2CB;
    --pastel-yellow: #FEE8AA;
    --pastel-mint: #B4F8CC;
    --pastel-lavender: #D6C5F7;

    /* -- Semantic -- */
    --positive: #30d158;
    --negative: #ff453a;
    --warning: #ff9f0a;
    --record: #ffd60a;
    --info: #60a5fa;

    /* -- Semantic tonal -- */
    --positive-tonal: rgba(52, 199, 89, 0.08);
    --positive-glow: rgba(52, 199, 89, 0.15);
    --negative-tonal: rgba(255, 69, 58, 0.08);
    --negative-glow: rgba(255, 69, 58, 0.12);
    --warning-tonal: rgba(255, 159, 10, 0.08);
    --warning-glow: rgba(255, 159, 10, 0.12);

    /* -- Semantic containers -- */
    --positive-container: #1e603f;
    --on-positive-container: #b3f7cb;
    --negative-container: #8a1a1e;
    --on-negative-container: #ff9993;
    --warning-container: rgba(255, 159, 10, 0.15);
    --on-warning-container: #ffd69a;
    --accent-container: rgba(180, 248, 204, 0.15);
    --on-accent-container: #b3f7cb;
    --record-container: rgba(255, 214, 10, 0.15);
    --on-record-container: #fef08a;
    --info-container: rgba(59, 130, 246, 0.15);
    --on-info-container: #93c5fd;

    /* -- Semantic outlines -- */
    --positive-outline: rgba(48, 209, 88, 0.35);
    --warning-outline: rgba(255, 159, 10, 0.35);
    --negative-outline: rgba(255, 69, 58, 0.35);
    --info-outline: rgba(59, 130, 246, 0.35);

    /* -- Borders -- */
    --divider: rgba(255,255,255,0.06);
    --border: rgba(255,255,255,0.12);
    --outline: #44484c;
    --outline-variant: #3a3a3c;

    /* -- Scrim & glass -- */
    --scrim: rgba(0, 0, 0, 0.60);
    --scrim-strong: rgba(0, 0, 0, 0.78);
    --surface-glass: rgba(0, 0, 0, 0.72);
    --surface-glass-border: rgba(255, 255, 255, 0.06);

    /* -- M3 tonal containers -- */
    --primary-container: #1e603f;
    --on-primary-container: #b3f7cb;
    --secondary-container: #002a36;
    --on-secondary-container: #a3ddf6;
    --tertiary-container: #4f426c;
    --on-tertiary-container: #d6c5f7;
    --error-container: #8a1a1e;
    --on-error-container: #ff9993;

    /* -- Inverse -- */
    --inverse-surface: #e3e6ea;
    --inverse-on-surface: #1a1d21;

    /* -- Elevation — dark-optimised (stronger opacity) -- */
    --elevation-0: none;
    --elevation-1: 0px 1px 2px 0px rgb(0 0 0 / 50%), 0px 1px 3px 1px rgb(0 0 0 / 25%);
    --elevation-2: 0px 1px 2px 0px rgb(0 0 0 / 50%), 0px 2px 6px 2px rgb(0 0 0 / 25%);
    --elevation-3: 0px 1px 3px 0px rgb(0 0 0 / 50%), 0px 4px 8px 3px rgb(0 0 0 / 25%);
    --elevation-4: 0px 2px 3px 0px rgb(0 0 0 / 50%), 0px 6px 10px 4px rgb(0 0 0 / 25%);
    --elevation-5: 0px 4px 4px 0px rgb(0 0 0 / 50%), 0px 8px 12px 6px rgb(0 0 0 / 25%);
    --focus-glow: 0 0 0 3px rgba(180, 248, 204, 0.22);
    --hero-glow: 0 8px 24px rgba(180, 248, 204, 0.10);

    /* -- Data visualisation palette -- */
    --chart-1: #60a5fa;
    --chart-2: #4ade80;
    --chart-3: #facc15;
    --chart-4: #f87171;
    --chart-5: #c084fc;
    --chart-6: #2dd4bf;
    --chart-7: #fb923c;
    --chart-8: #f472b6;
}

/* ============================================================
   BASE RESET
   ============================================================ */

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

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-body);
    font-weight: var(--weight-body);
    line-height: var(--leading-body);
    color: var(--text-primary);
    background: var(--bg);
}

/* ============================================================
   SHARED COMPONENT CLASSES
   ============================================================ */

/* -- Buttons -- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-family);
    font-size: var(--font-body);
    font-weight: var(--weight-title);
    line-height: 1;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--duration-normal) var(--easing-standard),
                box-shadow var(--duration-normal) var(--easing-standard);
    background: var(--accent);
    color: var(--on-accent);
}

.btn:hover {
    box-shadow: var(--elevation-1);
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-glow);
}

.btn-tonal {
    background: var(--accent-dim);
    color: var(--accent);
}

.btn-tonal:hover {
    box-shadow: none;
    background: rgba(26, 138, 74, 0.18);
}

:root[data-theme="dark"] .btn-tonal:hover {
    background: rgba(180, 248, 204, 0.22);
}

.btn-outlined {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-primary);
}

.btn-outlined:hover {
    background: rgba(0, 0, 0, 0.04);
    box-shadow: none;
}

:root[data-theme="dark"] .btn-outlined:hover {
    background: rgba(255, 255, 255, 0.06);
}

.btn-text {
    background: transparent;
    color: var(--accent);
    padding: var(--space-3) var(--space-4);
}

.btn-text:hover {
    background: var(--accent-dim);
    box-shadow: none;
}

/* -- Chips -- */

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-caption);
    font-weight: var(--weight-caption);
    border-radius: var(--radius-full);
    border: 1px solid var(--outline-variant);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--duration-fast) var(--easing-standard);
}

.chip:hover {
    background: rgba(0, 0, 0, 0.04);
}

:root[data-theme="dark"] .chip:hover {
    background: rgba(255, 255, 255, 0.06);
}

.chip[aria-selected="true"], .chip.selected {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--accent);
}

/* -- Toggles -- */

.toggle {
    position: relative;
    display: inline-flex;
    width: 52px;
    height: 32px;
    border: none;
    border-radius: var(--radius-full);
    background: var(--surface-4);
    cursor: pointer;
    transition: background var(--duration-fast) var(--easing-standard);
    padding: 0;
}

.toggle::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    background: var(--text-secondary);
    transition: transform var(--duration-fast) var(--easing-spring),
                background var(--duration-fast) var(--easing-standard);
}

.toggle[aria-checked="true"], .toggle.on {
    background: var(--accent);
}

.toggle[aria-checked="true"]::after, .toggle.on::after {
    transform: translateX(20px);
    background: var(--on-accent);
}

/* -- Cards -- */

.card {
    background: var(--surface-2);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--elevation-1);
    transition: box-shadow var(--duration-normal) var(--easing-standard);
}

.card:hover {
    box-shadow: var(--elevation-3);
}

/* -- Inputs -- */

.input {
    width: 100%;
    height: 56px;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-family);
    font-size: var(--font-body);
    color: var(--text-primary);
    background: var(--surface-2);
    border: 1px solid var(--outline);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color var(--duration-fast) var(--easing-standard),
                box-shadow var(--duration-fast) var(--easing-standard);
}

.input:focus {
    border-color: var(--accent);
    box-shadow: var(--focus-glow);
}

.input::placeholder {
    color: var(--text-tertiary);
}

/* -- Pills & Badges -- */

.pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-caption);
    font-weight: var(--weight-caption);
    border-radius: var(--radius-full);
    background: var(--accent-dim);
    color: var(--accent);
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    font-size: var(--font-label);
    font-weight: var(--weight-label);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--radius-full);
    background: var(--accent-dim);
    color: var(--accent);
}

/* -- Layout helpers -- */

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

/* -- Container utilities (auto-pair bg + text for correct contrast) -- */

.container-primary { background: var(--primary-container); color: var(--on-primary-container); }
.container-secondary { background: var(--secondary-container); color: var(--on-secondary-container); }
.container-tertiary { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.container-positive { background: var(--positive-container); color: var(--on-positive-container); }
.container-negative { background: var(--negative-container); color: var(--on-negative-container); }
.container-warning { background: var(--warning-container); color: var(--on-warning-container); }
.container-accent { background: var(--accent-container); color: var(--on-accent-container); }
.container-error { background: var(--error-container); color: var(--on-error-container); }
.container-record { background: var(--record-container); color: var(--on-record-container); }
.container-info { background: var(--info-container); color: var(--on-info-container); }

/* -- Theme Toggle -- */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--duration-fast) var(--easing-standard);
}

.theme-toggle:hover {
    background: var(--accent-dim);
}

/* ============================================================
   FOCUS & ACCESSIBILITY
   ============================================================ */

:focus-visible {
    outline: none;
    box-shadow: var(--focus-glow);
}

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

} /* end @layer kds */