/* Shared design tokens — palette grounded in the WA target face itself.
   See projectdata.md § 2026-07-31 "Visual design direction" for the source. */
:root {
    --gold: #b4842a;
    --gold-deep: #7a5719;
    --gold-soft: #f2e4be;
    --gold-track: #ede3c9;
    --silver: #8a92a0;
    --silver-deep: #5b6270;
    --silver-soft: #e4e6ea;
    --silver-track: #dde0e5;
    --bronze: #a8652f;
    --bronze-deep: #7a481f;
    --bronze-soft: #ecdac7;
    --bronze-track: #e6d1b8;
    --zone-white: #f5f6f2;
    --zone-white-border: #c9cec3;
    --zone-black: #2a2e2c;
    --red: #b5423a;
    --blue: #2c4a6e;
    --ink: #1b241e;
    --ink-faint: #8a938c;
    --ground: #f5f6f2;
    --surface: #ffffff;
    --surface-2: #fbfbf8;
    --border: #dde1d8;
    --border-strong: #c9cec3;
    --muted: #5c665e;

    --status-live: #2f7a4f;
    --status-live-bg: #deebe1;
    --status-offline: #8b9088;
    --status-public: #2c4a6e;
    --status-private: #8b9088;

    --shadow: 0 1px 2px rgba(20, 28, 20, .04), 0 8px 24px -12px rgba(20, 28, 20, .14);
    --font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
    --font-data: "Roboto Condensed", "Arial Narrow", sans-serif;
    --font-ui: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink: #eef1ea;
        --ink-faint: #6e786f;
        --ground: #14181a;
        --surface: #1c2224;
        --surface-2: #171c1d;
        --border: #2c3436;
        --border-strong: #3a443b;
        --muted: #9aa39c;
        --gold-deep: #c9a34e;
        --gold-soft: rgba(231, 190, 73, .16);
        --gold-track: rgba(231, 190, 73, .10);
        --silver-deep: #c3c9d1;
        --silver-soft: rgba(180, 188, 199, .16);
        --silver-track: rgba(180, 188, 199, .10);
        --bronze-deep: #d68f52;
        --bronze-soft: rgba(198, 128, 63, .18);
        --bronze-track: rgba(198, 128, 63, .10);
        --zone-white: #e9ece6;
        --zone-white-border: #3a443b;
        --zone-black: #0a0c0b;
        --status-live-bg: rgba(111, 203, 133, .14);
        --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -14px rgba(0, 0, 0, .6);
    }
}

:root[data-theme="dark"] {
    --ink: #eef1ea;
    --ink-faint: #6e786f;
    --ground: #14181a;
    --surface: #1c2224;
    --surface-2: #171c1d;
    --border: #2c3436;
    --border-strong: #3a443b;
    --muted: #9aa39c;
    --gold-deep: #c9a34e;
    --gold-soft: rgba(231, 190, 73, .16);
    --gold-track: rgba(231, 190, 73, .10);
    --silver-deep: #c3c9d1;
    --silver-soft: rgba(180, 188, 199, .16);
    --silver-track: rgba(180, 188, 199, .10);
    --bronze-deep: #d68f52;
    --bronze-soft: rgba(198, 128, 63, .18);
    --bronze-track: rgba(198, 128, 63, .10);
    --zone-white: #e9ece6;
    --zone-white-border: #3a443b;
    --zone-black: #0a0c0b;
    --status-live-bg: rgba(111, 203, 133, .14);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -14px rgba(0, 0, 0, .6);
}

:root[data-theme="light"] {
    --ink: #1b241e;
    --ink-faint: #8a938c;
    --ground: #f5f6f2;
    --surface: #ffffff;
    --surface-2: #fbfbf8;
    --border: #dde1d8;
    --border-strong: #c9cec3;
    --muted: #5c665e;
    --gold-deep: #7a5719;
    --gold-soft: #f2e4be;
    --gold-track: #ede3c9;
    --silver-deep: #5b6270;
    --silver-soft: #e4e6ea;
    --silver-track: #dde0e5;
    --bronze-deep: #7a481f;
    --bronze-soft: #ecdac7;
    --bronze-track: #e6d1b8;
    --zone-white: #f5f6f2;
    --zone-white-border: #c9cec3;
    --zone-black: #2a2e2c;
    --status-live-bg: #deebe1;
    --shadow: 0 1px 2px rgba(20, 28, 20, .04), 0 8px 24px -12px rgba(20, 28, 20, .14);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
}

a { color: var(--blue); }

.tabular { font-variant-numeric: tabular-nums; }