/* #1 */

/* #2 */

/* #3 */
@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Medium.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-SemiBold.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/fonts/JetBrainsMono-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/fonts/JetBrainsMono-Medium.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/fonts/JetBrainsMono-Bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}

:root {
    /* #4 */
    /* Browser-native UI (file pickers, date/time pickers, scrollbars,
       autofill) follows this; without it, Chromium paints those widgets
       on a white surface inside our dark shell. */
    color-scheme: dark;
    --primary: #e8650a;          /* #5 */
    --primary-dim: #c75508;      /* #6 */
    --secondary: #b82020;        /* #7 */
    --accent: #e8650a;           /* #8 */
    --success: #4a7c59;          /* #9 */
    --bg-base: #111111;          /* #10 */
    --bg-surface: #1a1a1a;       /* #11 */
    --bg-elevated: #222222;      /* #12 */
    --text-primary: #e8e4de;     /* #13 */
    --text-secondary: #8a8580;   /* #14 */
    --text-muted: #5c5752;       /* #15 */
    --border: #2e2c28;           /* #16 */
    --focus-ring: rgba(232, 101, 10, 0.3);
    --logo-invert: 0;            /* #17 */
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --radius: 0;
    /* #18 */
    --unit: 0.5rem;
    --space-xs: var(--unit);               /* #19 */
    --space-sm: calc(var(--unit) * 1.5);   /* #20 */
    --space-md: calc(var(--unit) * 2);     /* #21 */
    --space-lg: calc(var(--unit) * 3);     /* #22 */
    --space-xl: calc(var(--unit) * 4);     /* #23 */
    --space-2xl: calc(var(--unit) * 6);    /* #24 */
    /* #25 */
    --micro-size: 0.625rem;  /* #26 */
    --micro-color: var(--text-muted);
    /* #27 */
    --fs-heading-lg: clamp(1rem, 2.5vw, 1.375rem);
    /* #28 */
    --dur-fast: 150ms;
    --dur-normal: 250ms;
    --dur-slow: 400ms;
    --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0.0, 1, 1);
    /* #29 */
    --fm-cols: 12;
    --fm-gutter: var(--space-md);
    --fm-breakpoint-md: 37.5rem;
    --fm-breakpoint-lg: 60rem;
}

/* #30 */
body[data-density="compact"] {
    --unit: 0.375rem;        /* #31 */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 0.75rem;
    --space-lg: 1.125rem;
    --row-height: 1.75rem;
    --input-min-height: 1.75rem;
    --tap-target: 2rem;
    --content-font: 0.7812rem;
}
body[data-density="comfortable"] {
    --row-height: 2.25rem;
    --input-min-height: 2.25rem;
    --tap-target: 2.5rem;
    --content-font: 0.8125rem;
}
body[data-density="spacious"] {
    --unit: 0.625rem;        /* #32 */
    --space-xs: 0.625rem;
    --space-sm: 0.875rem;
    --space-md: 1.25rem;
    --space-lg: 1.75rem;
    --row-height: 3rem;
    --input-min-height: 2.75rem;
    --tap-target: 3rem;
    --content-font: 0.9375rem;
}

/* #33 */

/* #34 */
@media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;
        --bg-base: #f2f0ec;
        --bg-surface: #ffffff;
        --bg-elevated: #e8e5df;
        --text-primary: #1a1a1a;
        --text-secondary: #6b6560;
        --text-muted: #9a9590;
        --border: #d4d0c8;
        --focus-ring: rgba(232, 101, 10, 0.25);
        /* #35 */
        --logo-invert: 1;
    }
}