/* =========================================================
   THEME (light / dark)
========================================================= */

:root {
    color-scheme: light;
}

/* default = light */
:root {
    --bg: #ffffff;
    --text: #111;
    --muted: rgba(0, 0, 0, 0.65);

    --surface: #ffffff;
    --surface-2: #f8f9fa;

    --border-color: rgba(0, 0, 0, 0.10);
    --divider-color: rgba(0, 0, 0, 0.06);

    --shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.12);

    --accent: #0d6efd;
    --accent-contrast: #ffffff;
    --accent-soft: rgba(13, 110, 253, 0.18);
}

/* dark theme */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0f1115;
    --text: rgba(255, 255, 255, 0.92);
    --muted: rgba(255, 255, 255, 0.70);

    --surface: rgba(255, 255, 255, 0.06);
    --surface-2: rgba(255, 255, 255, 0.08);

    --border-color: rgba(255, 255, 255, 0.12);
    --divider-color: rgba(255, 255, 255, 0.08);

    --shadow: 0 10px 28px rgba(0, 0, 0, 0.40);
    --shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.55);

    --accent: #3b82f6;
    --accent-soft: rgba(59, 130, 246, 0.25);
}