/* Design tokens: the single source of colors, type, radii and spacing. Components use the variables;
   dark mode only redefines them. Cards stay paper-colored in both themes, like real cards. */
:root {
    color-scheme: light;

    --ground: #F4EFE6;
    --surface: #FFFDF8;
    --surface-2: #EFE8DC;
    --ink: #23201C;
    --muted: #6B645B;
    --line: #E3DACB;

    --accent: #1F4B99;        /* Aegean blue */
    --accent-ink: #FFFFFF;
    --accent-soft: #E3EAF6;
    --call: #B5532E;          /* terracotta: Tichu calls, bombs */
    --call-ink: #FFFFFF;
    --call-soft: #F6E3DA;
    --danger: #B3261E;
    --ok: #2E7D4F;

    --felt: #1F5C45;
    --felt-2: #24694F;
    --felt-ink: #F4EFE6;
    --felt-muted: #BFD3C8;

    --card: #FFFDF8;
    --card-line: #D9CFBE;
    --suit-jade: #1E7A4F;
    --suit-sword: #2B2B2B;
    --suit-pagoda: #1F4B99;
    --suit-star: #B3261E;
    --special-mahjong: #8A5A12;
    --special-dog: #6B4A2B;
    --special-phoenix: #C2410C;
    --special-dragon: #A16207;
    --special-tint: #FBF1DC;

    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 20px;
    --text-xl: 28px;

    --radius: 16px;
    --radius-sm: 10px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    --shadow: 0 1px 2px rgb(35 32 28 / 8%), 0 4px 16px rgb(35 32 28 / 6%);
    --shadow-card: 0 1px 2px rgb(0 0 0 / 25%);
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        --ground: #15130F;
        --surface: #1F1C17;
        --surface-2: #29251F;
        --ink: #F1EBE0;
        --muted: #A79F92;
        --line: #34302A;

        --accent: #8FB0EA;
        --accent-ink: #0F1A30;
        --accent-soft: #1E2A40;
        --call: #E08A63;
        --call-ink: #2A130A;
        --call-soft: #3A2419;
        --danger: #F2B8B5;
        --ok: #8FD1A8;

        --felt: #143A2D;
        --felt-2: #184536;
        --felt-ink: #F1EBE0;
        --felt-muted: #9DB8AA;

        --card: #F1EBE0;
        --card-line: #C9BFAE;

        --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 16px rgb(0 0 0 / 30%);
    }
}