:root {
    --bg: #f4f5f7;
    --surface: #ffffff;
    --surface-secondary: #f8fafc;

    --border: #d9dde4;

    --text: #1b2430;
    --muted: #64748b;

    --accent: #d97b7b;
    --accent-hover: #c96a6a;
    --accent-text: #ffffff;

    --shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

html[data-theme="dark"] {
    --bg: #343940;
    --surface: #4a5058;
    --surface-secondary: #40464e;

    --border: #171a1f;

    --text: #ffffff;
    --muted: #d3d7dd;

    --accent: #d97b7b;
    --accent-hover: #c96a6a;
    --accent-text: #ffffff;

    --shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}

html,
body {
    background: var(--bg);
    color: var(--text);
    transition:
        background 0.2s ease,
        color 0.2s ease;
}