:root {
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", monospace;

    --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;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --container-width: 100%;
    --admin-width: 100%;
    --container-gutter: 5%;
    --container-gutter-min: 1rem;
    --sidebar-width: 15rem;

    --measure-prose: none;
    --measure-form: none;

    --control-height: 2.875rem;
    --header-height: 4.75rem;

    --grid-gap: var(--space-6);
    --grid-gap-tight: var(--space-4);

    --transition-fast: 120ms ease;
    --transition-base: 200ms ease;
}

:root {
    color-scheme: light;

    --color-bg: #f7f9fb;
    --color-bg-muted: #eef2f6;
    --color-surface: #ffffff;
    --color-surface-raised: #ffffff;
    --color-surface-sunken: #f2f5f8;
    --color-border: #dde4ec;
    --color-border-strong: #c3cedb;
    --color-border-interactive: #828f9e;
    --color-border-interactive-hover: #6f7c8a;

    --color-text: #1b2733;
    --color-text-muted: #5b6b7c;
    --color-heading: #0d1826;

    --color-accent: #ffc857;
    --color-accent-strong: #f0ad2e;
    --color-accent-soft: #fff5dd;
    --color-accent-text: #3a2a05;

    --color-link: #1d4ed8;

    --color-dark: #16202a;
    --color-dark-text: #ffffff;

    --color-sidebar-bg: #ffffff;
    --color-topbar-bg: #ffffff;

    --color-success-bg: #e4f6ea;
    --color-success-text: #14532d;
    --color-success-border: #a7d9ba;
    --color-error-bg: #fdeaea;
    --color-error-text: #8a1c1c;
    --color-error-border: #f0b4b4;
    --color-warning-bg: #fdf3e0;
    --color-warning-text: #7a4510;
    --color-warning-border: #e8c68a;
    --color-info-bg: #e7effb;
    --color-info-text: #1c3d80;
    --color-info-border: #b4c9ea;

    --color-focus: #1d4ed8;

    --shadow-sm: 0 1px 2px rgba(13, 24, 38, 0.06);
    --shadow-md: 0 4px 16px rgba(13, 24, 38, 0.08);
    --shadow-lg: 0 12px 32px rgba(13, 24, 38, 0.12);
}


@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-base: 0ms;
    }
}