/*
 * Design tokens. Color literals live only in this file (docs/design-system.md).
 * Rule: a single :root block. Selectors and component rules go in app.css.
 */
:root {
    /* Backgrounds: three steps of dark navy */
    --color-bg: #0f1420;
    --color-surface: #171f2e;
    --color-surface-raised: #1f2a3d;
    --color-line: #2a3548;
    --color-line-strong: #3a4760;

    /* Text: three steps */
    --color-text: #e8ebf2;
    --color-text-muted: #9aa4b6;
    --color-text-subtle: #6c778b;

    /* Chip gold: money and primary actions only */
    --color-accent: #f5b301;
    --color-accent-hover: #ffc629;
    --color-accent-ink: #1c1500;
    --color-accent-surface: #f5b3011a;

    /* Status: green/red only for balance going up/down */
    --color-positive: #3ecf8e;
    --color-positive-surface: #3ecf8e1f;
    --color-negative: #ff6b6b;
    --color-negative-surface: #ff6b6b1f;
    --color-warning: #f0a43a;
    --color-warning-surface: #f0a43a1f;
    --color-info: #6aa8ff;
    --color-info-surface: #6aa8ff1f;
    --color-focus: #ffd24d;
    --color-scrim: #0009;

    /* Charts (admin stats). Bet and win pass the categorical palette checks (lightness band, chroma, color-vision separation, 3:1 contrast)
       against --color-surface. Profit is a neutral gray so its sign reads from position around the zero line, not from the green/red
       reserved for balance */
    --chart-bet: #3987e5;
    --chart-win: #d95926;
    --chart-profit: #b8c0cf;

    /* Spacing (multiples of 4px) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    /* Type */
    /* Vendored fonts only, so every OS renders the same: Inter for Latin (@font-face in app.css, public/fonts/inter), then Noto Sans KR/JP/SC/TC for
       Hangul, Kana and Han (@font-face in fonts-cjk.css, public/fonts/noto-sans-*). Han characters share code points but differ in shape per language,
       so the first CJK font decides their look: Korean by default, and app.css swaps in the -ja / -zh-* stack by <html lang>. Same fonts, only the order changes */
    --font-sans: "Inter", "Noto Sans KR Variable", "Noto Sans JP Variable", "Noto Sans SC Variable", "Noto Sans TC Variable", sans-serif;
    --font-sans-ja: "Inter", "Noto Sans JP Variable", "Noto Sans KR Variable", "Noto Sans SC Variable", "Noto Sans TC Variable", sans-serif;
    --font-sans-zh-hans: "Inter", "Noto Sans SC Variable", "Noto Sans TC Variable", "Noto Sans JP Variable", "Noto Sans KR Variable", sans-serif;
    --font-sans-zh-hant: "Inter", "Noto Sans TC Variable", "Noto Sans SC Variable", "Noto Sans JP Variable", "Noto Sans KR Variable", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    /* Same typeface as the logo. Only for the logo name (<x-logo />) and the login title (@font-face in app.css, public/fonts/cinzel) */
    --font-display: "Cinzel", Georgia, "Times New Roman", serif;
    --text-xs: 12px;
    --text-sm: 13px;
    --text-md: 15px;
    --text-lg: 18px;
    --text-xl: 24px;
    --text-2xl: 32px;
    /* Inputs on narrow screens. iOS Safari zooms in when an input under 16px gets focus */
    --text-input-touch: 16px;
    --leading-tight: 1.25;
    --leading-normal: 1.55;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-bold: 700;

    /* Shape */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-pill: 999px;
    --shadow-1: 0 1px 2px #0006;
    --shadow-2: 0 10px 28px #0008;

    /* Layout */
    --content-max: 1120px;
    /* Admin screens are work tables (Transactions has seven columns); give them more of a wide monitor */
    --content-max-admin: 1440px;
    --topbar-height: 60px;
    --topbar-height-sm: 56px;
    /* Minimum touch target size (WCAG 2.5.5 recommends 44px) */
    --touch-target: 44px;
    /* Width of the left label column when tables become cards on narrow screens */
    --card-label-width: 88px;
}