:root {
    /* Typography */
    --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    --font-family-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: clamp(2.5rem, 5vw, 4rem);

    --line-height-tight: 1.25;
    --line-height-compressed: 1.12;
    --line-height-base: 1.6;
    --line-height-relaxed: 1.75;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Spacing */
    --space-0: 0;
    --space-50: 0.25rem;
    --space-75: 0.375rem;
    --space-100: 0.5rem;
    --space-150: 0.75rem;
    --space-200: 1rem;
    --space-250: 1.25rem;
    --space-300: 1.5rem;
    --space-400: 2rem;
    --space-450: 2.5rem;
    --space-500: 3rem;

    /* Sizing */
    --toolbar-width: 72px;
    --container-max-width: 1280px;

    /* Radius */
    --radius-50: 3px;
    --radius-100: 4px;
    --radius-200: 8px;
    --radius-300: 12px;
    --radius-round: 999px;

    /* Borders */
    --border-width-hairline: 1px;
    --border-width-strong: 2px;

    /* Motion */
    --transition-fast: 0.15s;
    --transition-base: 0.2s;
    --transition-slow: 0.3s;

    /* Elevation */
    --shadow-100: 0 2px 8px var(--shadow-color-100);
    --shadow-200: 0 4px 12px var(--shadow-color-200);
    --shadow-300: 0 10px 40px var(--shadow-color-300);

    /* Theme placeholders (populated by theme maps) */
    --color-bg-app: #ffffff;
    --color-bg-muted: #f5f5f5;
    --color-bg-elevated: #ffffff;
    --color-bg-inverse: #000000;

    --color-surface-card: #ffffff;
    --color-surface-modal: #ffffff;

    --color-text-strong: #000000;
    --color-text-default: #1f2933;
    --color-text-subtle: #6b7280;
    --color-text-inverse: #ffffff;

    --color-border-subtle: #e5e5e5;
    --color-border-strong: #cbd5e1;

    --color-accent: #000000;
    --color-accent-hover: #333333;
    --color-accent-contrast: #ffffff;

    --color-danger: #dc2626;
    --color-danger-contrast: #ffffff;
    --color-warning: #f59e0b;
    --color-warning-contrast: #0b0b0b;
    --color-success: #15803d;

    --color-pill-bg: rgba(15, 15, 15, 0.05);

    --overlay-strong: rgba(15, 23, 42, 0.6);
    --overlay-stronger: rgba(15, 23, 42, 0.85);

    --shadow-color-100: rgba(15, 23, 42, 0.08);
    --shadow-color-200: rgba(15, 23, 42, 0.12);
    --shadow-color-300: rgba(15, 23, 42, 0.14);

    /* Legacy custom property shims */
    --bg: var(--color-bg-app);
    --text: var(--color-text-strong);
    --secondary: var(--color-text-subtle);
    --accent: var(--color-accent);
    --border: var(--color-border-subtle);
    --hover: var(--color-bg-muted);
    --card-bg: var(--color-surface-card);
    --modal-bg: var(--color-surface-modal);
    --modal-overlay: var(--overlay-stronger);
    --shadow: var(--shadow-color-200);
    --accent-hover: var(--color-accent-hover);
    --accent-contrast: var(--color-accent-contrast);
}

:root[data-theme="light"] {
    --color-bg-app: #ffffff;
    --color-bg-muted: #f5f5f5;
    --color-bg-elevated: #ffffff;
    --color-bg-inverse: #0f172a;

    --color-surface-card: #ffffff;
    --color-surface-modal: #ffffff;

    --color-text-strong: #0f172a;
    --color-text-default: #1f2937;
    --color-text-subtle: #6b7280;
    --color-text-inverse: #ffffff;

    --color-border-subtle: #e5e7eb;
    --color-border-strong: #cbd5e1;

    --color-accent: #0f172a;
    --color-accent-hover: #1f2937;
    --color-accent-contrast: #ffffff;

    --color-danger: #dc2626;
    --color-danger-contrast: #ffffff;
    --color-warning: #f59e0b;
    --color-warning-contrast: #0b0b0b;
    --color-success: #15803d;

    --color-pill-bg: rgba(15, 23, 42, 0.06);

    --overlay-strong: rgba(15, 23, 42, 0.5);
    --overlay-stronger: rgba(15, 23, 42, 0.75);

    --shadow-color-100: rgba(15, 23, 42, 0.08);
    --shadow-color-200: rgba(15, 23, 42, 0.12);
    --shadow-color-300: rgba(15, 23, 42, 0.18);
}

:root[data-theme="dark"] {
    --color-bg-app: #050506;
    --color-bg-muted: #101113;
    --color-bg-elevated: #141517;
    --color-bg-inverse: #f8fafc;

    --color-surface-card: #111214;
    --color-surface-modal: #15171a;

    --color-text-strong: #f8fafc;
    --color-text-default: #e2e8f0;
    --color-text-subtle: #a3acb9;
    --color-text-inverse: #050506;

    --color-border-subtle: #2c2f36;
    --color-border-strong: #3b3f47;

    --color-accent: #e2e8f0;
    --color-accent-hover: #f1f5f9;
    --color-accent-contrast: #0b0c0e;

    --color-danger: #f87171;
    --color-danger-contrast: #0b0c0e;
    --color-warning: #fbbf24;
    --color-warning-contrast: #030712;
    --color-success: #4ade80;

    --color-pill-bg: rgba(226, 232, 240, 0.08);

    --overlay-strong: rgba(5, 6, 8, 0.6);
    --overlay-stronger: rgba(5, 6, 8, 0.82);

    --shadow-color-100: rgba(3, 7, 18, 0.6);
    --shadow-color-200: rgba(3, 7, 18, 0.55);
    --shadow-color-300: rgba(3, 7, 18, 0.5);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --color-bg-app: #050506;
        --color-bg-muted: #101113;
        --color-bg-elevated: #141517;
        --color-bg-inverse: #f8fafc;

        --color-surface-card: #111214;
        --color-surface-modal: #15171a;

        --color-text-strong: #f8fafc;
        --color-text-default: #e2e8f0;
        --color-text-subtle: #a3acb9;
        --color-text-inverse: #050506;

        --color-border-subtle: #2c2f36;
        --color-border-strong: #3b3f47;

        --color-accent: #e2e8f0;
        --color-accent-hover: #f1f5f9;
        --color-accent-contrast: #0b0c0e;

        --color-danger: #f87171;
        --color-danger-contrast: #0b0c0e;
        --color-warning: #fbbf24;
        --color-warning-contrast: #030712;
        --color-success: #4ade80;

        --color-pill-bg: rgba(226, 232, 240, 0.08);

        --overlay-strong: rgba(5, 6, 8, 0.6);
        --overlay-stronger: rgba(5, 6, 8, 0.82);

        --shadow-color-100: rgba(3, 7, 18, 0.6);
        --shadow-color-200: rgba(3, 7, 18, 0.55);
        --shadow-color-300: rgba(3, 7, 18, 0.5);
    }
}