/* Design tokens: every colour, radius and type size used by the app lives here.
   Palette: Ivory #FAFAEB, Deep Crimson #9D1B1D, Olive Wood #855E3E. */
:root {
    color-scheme: light;

    /* Olive Wood page; ivory panels, cards, tables and inputs sit on top */
    --bg: #855e3e;
    --surface: #f3efdc;
    --card: #fafaeb;
    --surface-2: #f7f5e4;
    --surface-3: #ebe4cd;
    --input-bg: #fffff6;
    --border: #e0d7bf;
    --border-strong: #c6b698;
    --text: #2a1a12;
    --text-2: #4d3a2c;
    --text-3: #6b5747;

    /* Deep Crimson for actions and active states; Olive Wood for "best" highlights and brand detail */
    --accent: #9d1b1d;
    --accent-hover: #841517;
    --accent-ink: #fafaeb;
    --accent-soft: rgba(157, 27, 29, 0.09);
    --accent-2: #855e3e;
    --brand-gradient: linear-gradient(135deg, #b3292b 0%, #8a1618 100%);
    --link: #6b4a2f;
    --focus: #9d1b1d;

    /* Status colours, deepened to read on ivory */
    --live: #c43f2a;
    --good: #236b3a;
    --good-soft: rgba(35, 107, 58, 0.12);
    --bad: #b8401f;
    --bad-soft: rgba(184, 64, 31, 0.12);
    --warn: #745000;
    --warn-soft: rgba(196, 146, 20, 0.15);
    --orange: #c45a14;
    --orange-soft: rgba(196, 90, 20, 0.13);

    /* Shell and floating layers */
    --sidebar-bg: #fafaeb;
    --topbar-bg: rgba(122, 85, 55, 0.94);
    --popover: #fafaeb;
    --glow: rgba(255, 236, 205, 0.12);
    --glow-2: rgba(157, 27, 29, 0.16);
    --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    --shadow-sm: 0 1px 2px rgba(40, 22, 10, 0.12), 0 2px 8px rgba(40, 22, 10, 0.08);
    --shadow: 0 14px 34px rgba(40, 22, 10, 0.28);
    --ease: 140ms ease;

    --tier-elite: #236b3a;
    --tier-good: #346e45;
    --tier-mid: var(--text-3);
    --tier-poor: #a2533a;
    --tier-bad: #b8401f;

    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;

    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --fs-xs: 11px;
    --fs-sm: 12.5px;
    --fs-md: 14px;
    --fs-lg: 17px;
    --fs-xl: 22px;
    --fs-2xl: 28px;

    --sidebar-w: 236px;
    --content-max: 1480px;
}

/* The sidebar is ivory: its controls sit on a slightly deeper ivory so they still stand out. */
.sidebar {
    --surface: #f2eed9;
    --surface-2: #efe9d3;
    --surface-3: #e7dfc6;
    --border: #e4dcc4;
}

/* Text that sits straight on the Olive Wood page (titles, breadcrumbs, notes, footer) is ivory. */
.topbar, .main-content, .app-footer {
    --text: #fafaeb;
    --text-2: #f1ebdb;
    --text-3: #e9dfcc;
    --link: #fafaeb;
    --accent: #fafaeb;
    --accent-soft: rgba(250, 250, 235, 0.14);
    --border: rgba(250, 250, 235, 0.16);
    --border-strong: rgba(250, 250, 235, 0.32);
    color: var(--text);
}

/* Everything with an ivory background goes back to dark ink. :where() keeps this from out-ranking
   component colours such as the primary button's ivory label. */
:where(.entity-head, .panel, .btn:not(.btn--ghost), .btn--ghost:hover, .filters, .field input, .field select, .field textarea, .control,
.form-card, details.advanced, .chip, .segmented, .stat-group, .col-menu-list, .table-wrap, .tile, .callout, .pill, .avatar,
.week-hero, .game-card, .coverage div, .team-card, .scoreboard, .leader, .edge-card, .team-box-card, .result-summary,
.result-card, .result-list, .games-badge, .hit, .hit-pill, .allow-card, .search-box, .search-panel) {
    --text: #2a1a12;
    --text-2: #4d3a2c;
    --text-3: #6b5747;
    --link: #6b4a2f;
    --accent: #9d1b1d;
    --accent-soft: rgba(157, 27, 29, 0.09);
    --border: #e0d7bf;
    --border-strong: #c6b698;
    color: var(--text);
}