/*
 * The application's theme, for the browser. Every value here is a variable of the design file's
 * HUD/Theme collection (Dark mode 2:0, Light mode 271:0) and HUD/Radius+Space, which are in turn
 * UI.Theme's Colors.xaml and WhatEachThemeIsPaintedIn. Change a color there first.
 *
 * The website wears the dark theme, as the application does, whatever the reader's system prefers.
 * The light theme is kept below for a page that asks for it by name, with data-theme="light" on
 * its root; nothing asks for it yet.
 */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("../fonts/Inter-Regular.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("../fonts/Inter-Medium.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("../fonts/Inter-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("../fonts/Inter-Bold.ttf") format("truetype"); }

:root {
    color-scheme: dark;

    --bg-canvas: #0d1117;
    --bg-sidebar: #11161d;
    --bg-surface: #161c24;
    --bg-raised: #1d2530;
    --bg-hover: #222c38;
    --bg-felt: #0f3b2e;
    --card-face: #edf2f7;
    --card-pip-red: #c82b31;
    --card-pip-black: #0f171f;
    --card-back: #1b3b72;
    /* Chips, one color to a denomination in big blinds, as the application draws them. Kept only
       here: chips sit on the felt, which is the same green in either theme. */
    --chip-half: #4f8fd6;
    --chip-one: #e4e8ee;
    --chip-five: #c8393c;
    --chip-twenty-five: #2f9a5a;
    --chip-hundred: #3a3f48;
    --chip-five-hundred: #7b55c7;
    --chip-rim: rgba(0, 0, 0, 0.35);

    --accent-primary: #25c685;
    --accent-dim: #124333;
    --accent-blue: #3b82f6;

    --marker-reg: #e5484d;
    --marker-fish: #30a46c;
    --marker-whale: #f5a524;

    --text-primary: #e9eef5;
    --text-secondary: #9aa7b6;
    --text-muted: #8794a3;
    --text-inverse: #08110c;

    --border-subtle: #222c37;
    --border-strong: #56697e;

    --status-loss: #ff4d4f;
    --status-win: #25c685;
    --status-warn: #f5a524;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;

    --shadow-menu: 0 12px 32px rgba(0, 0, 0, 0.45);
}

:root[data-theme="light"] {
    color-scheme: light;

    --bg-canvas: #f4f6f9;
    --bg-sidebar: #ebeef3;
    --bg-surface: #ffffff;
    --bg-raised: #f0f3f7;
    --bg-hover: #e6ebf1;
    --bg-felt: #0f3b2e;
    --card-face: #edf2f7;
    --card-pip-red: #c82b31;
    --card-pip-black: #0f171f;
    --card-back: #1b3b72;

    --accent-primary: #139e68;
    --accent-dim: #d4f1e4;
    --accent-blue: #2563eb;

    --marker-reg: #d6363c;
    --marker-fish: #23875a;
    --marker-whale: #c27c0e;

    --text-primary: #111820;
    --text-secondary: #4a5563;
    --text-muted: #7a8594;
    --text-inverse: #ffffff;

    --border-subtle: #e2e7ee;
    --border-strong: #c8d0da;

    --status-loss: #d92d30;
    --status-win: #139e68;
    --status-warn: #c27c0e;

    --shadow-menu: 0 12px 32px rgba(17, 24, 32, 0.16);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--bg-canvas);
    color: var(--text-primary);
    font-family: "Inter", system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-blue); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; }
p { margin: 0; }

:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
/* Blazor moves focus to a page's heading after navigating, for screen readers; it is not a control. */
h1:focus, h1:focus-visible { outline: none; }

/* Type, as the application writes it: nothing heavier than Semi Bold. */
.label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.label--accent { color: var(--accent-primary); }
.muted { color: var(--text-muted); font-weight: 500; font-size: 11px; }
.secondary { color: var(--text-secondary); font-weight: 500; }
.display { font-size: 44px; line-height: 1.15; letter-spacing: -0.02em; }
.title-1 { font-size: 36px; letter-spacing: -0.02em; }
.title-2 { font-size: 28px; letter-spacing: -0.01em; }
.title-3 { font-size: 22px; letter-spacing: -0.01em; }
.lede { font-size: 14px; color: var(--text-secondary); font-weight: 500; line-height: 1.65; }
.body { font-size: 13px; color: var(--text-secondary); font-weight: 500; line-height: 1.7; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}