/* Modern skin - clean corporate/minimal: cool grays, blue accent, sans-serif throughout, sharp
   corners, flat surfaces. */
:root[data-skin="modern"] {
    --font-display: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
    --radius: 4px;
    --radius-sm: 3px;
    --radius-lg: 8px;
    --radius-pill: 999px;

    --color-bg: #f4f6f9;
    --color-surface: #ffffff;
    --color-surface-alt: #eaeef3;
    --color-border: #d7dee6;
    --color-text: #1a2433;
    --color-text-muted: #5b6b7d;
    --color-primary: #2457c9;
    --color-primary-contrast: #ffffff;
    --color-primary-tint: rgba(36, 87, 201, 0.08);
    --color-glow-rgb: 36, 87, 201;
    --color-accent: #0f9d80;
    --color-danger: #c9333d;
    --color-danger-bg: #fbe8e9;
    --color-focus: #2457c9;

    --shadow-btn: 0 1px 2px rgba(20, 30, 50, 0.12);
    --shadow-btn-hover: 0 4px 10px rgba(20, 30, 50, 0.18);
    --shadow-card: 0 1px 2px rgba(20, 30, 50, 0.05);
    --shadow-card-hover: 0 6px 16px rgba(20, 30, 50, 0.1);
}

:root[data-skin="modern"][data-color-mode="dark"] {
    --color-bg: #10151d;
    --color-surface: #171e28;
    --color-surface-alt: #1e2733;
    --color-border: #2c3746;
    --color-text: #e8edf3;
    --color-text-muted: #93a2b5;
    --color-primary: #5b8def;
    --color-primary-contrast: #0a1120;
    --color-primary-tint: rgba(91, 141, 239, 0.16);
    --color-glow-rgb: 91, 141, 239;
    --color-accent: #35c6a4;
    --color-danger: #ef6b73;
    --color-danger-bg: #33191b;
    --color-focus: #5b8def;

    --shadow-btn: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-btn-hover: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-card: 0 1px 1px rgba(0, 0, 0, 0.25);
    --shadow-card-hover: 0 8px 20px rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: dark) {
    :root[data-skin="modern"]:not([data-color-mode="light"]) {
        --color-bg: #10151d;
        --color-surface: #171e28;
        --color-surface-alt: #1e2733;
        --color-border: #2c3746;
        --color-text: #e8edf3;
        --color-text-muted: #93a2b5;
        --color-primary: #5b8def;
        --color-primary-contrast: #0a1120;
        --color-primary-tint: rgba(91, 141, 239, 0.16);
        --color-glow-rgb: 91, 141, 239;
        --color-accent: #35c6a4;
        --color-danger: #ef6b73;
        --color-danger-bg: #33191b;
        --color-focus: #5b8def;
        --shadow-btn: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-btn-hover: 0 4px 12px rgba(0, 0, 0, 0.4);
        --shadow-card: 0 1px 1px rgba(0, 0, 0, 0.25);
        --shadow-card-hover: 0 8px 20px rgba(0, 0, 0, 0.35);
    }
}