/*---------------------------------------------------------
    제우스 — the palette.

    Ours, and outside both export trees on purpose: `1bet_v4/` is the frozen
    1xbet archive (647 files, 592 MD5-identical) and its value is that anyone
    can diff it back, so nothing of ours goes in there. `public/skin/<id>/` is
    where a skin's own application-level overlays live, beside
    `public/brand/<id>/` which holds its artwork.

    ── Why this is a file and not `@theme` ────────────────

    These thirty-one colours were `@theme` in `globals.css`, transcribed from
    this skin's stylesheets, with a comment saying so. That made them the
    *platform's* palette and made 제우스 the site's default look: 헤라 got its
    own colours only where `screens*.css` happened to cover, and 제우스's
    everywhere else — the toast over a failed launch, 공지 본문's `.rich`
    block, the four event screens, the vendor-recall control. Nothing failed;
    the pages rendered and the widths measured clean.

    Each skin declares all of them now, in its own file, loaded first among its
    global sheets. The declarations are **unlayered**, and `@theme` emits into
    `@layer theme`, so these win whatever the load order — the same mechanism
    `common.css` uses against Tailwind, applied deliberately for once.

    `globals.css` keeps the same names as a last resort, for a request whose
    skin sheet did not arrive. `skin-palette.spec.ts` pins the two together, so
    the fallback cannot drift away from what this skin actually looks like.

    ── The layer names ───────────────────────────────────

    base (page) < panel (section) < field (input/data) < raise (hover/header),
    which is how the original stacks them.
---------------------------------------------------------*/

:root {
    --color-base: #070a0f;
    --color-deep: #031124;
    --color-panel: #07172d;
    --color-field: #0d1d32;
    --color-raise: #29324b;
    --color-alt: #11141d;
    --color-card: #0d1930;
    --color-sunk: #08111d;

    --color-line: #313742;
    --color-line-soft: #29324b;
    --color-line-tile: #4d5a8b;
    --color-line-head: #1b283d;

    --color-brand: #ef7c00;
    --color-brand-glow: #fff0c8;
    --color-gold: #ffc967;
    --color-gold-alt: #f5b841;

    --color-danger: #850909;
    --color-danger-hover: #a50e0e;
    --color-danger-text: #e53935;
    --color-up: #12ac1c;
    --color-up-text: #e6ffe8;
    --color-down: #ff4137;
    --color-down-text: #ffdcda;
    --color-win: #2979ff;

    --color-ink: #cccccc;
    --color-ink-strong: #ffffff;
    --color-ink-soft: #e3e3e3;
    --color-ink-nav: #aeaeae;
    --color-ink-label: #aaaaaa;
    --color-ink-muted: #888888;
    --color-ink-team: #959595;

    --font-sans: "Noto Sans KR", "Pretendard", sans-serif;
    --font-numeric: "Rajdhani", "Noto Sans KR", sans-serif;
    --font-display: "Gmarket Sans", "Noto Sans KR", sans-serif;
}

/*---------------------------------------------------------
    The shared controls, in this skin's colours and sizes.

    `page-shell.tsx` keeps the *structure* — `PageShell`, `Panel`, `FormRow`,
    `Button`, `Alert` — and each skin owns what they look like. The tones used
    to be six literal Tailwind class strings in that file (`BUTTON_TONES`) and
    four more for `ALERT_TONES`, which meant a skin could not change a submit
    button's colour without editing a platform component every skin renders.

    Sizes are here for the same reason and one more: 44px is a thumb, and a
    skin that wanted a taller control had nowhere to say so.
---------------------------------------------------------*/

:root {
    --ui-btn-radius: 3px;
    --ui-btn-h-sm: 32px;
    --ui-btn-h-md: 40px;
    --ui-btn-h-lg: 48px;

    /* `#board_list .btn_write` — the skin's own submit colour. */
    --ui-btn-primary-bg: var(--color-danger);
    --ui-btn-primary-ink: var(--color-ink-strong);
    --ui-btn-primary-bg-hover: var(--color-danger-hover);
    --ui-btn-primary-line: transparent;

    --ui-btn-accent-bg: var(--color-brand);
    --ui-btn-accent-ink: #ffffff;
    --ui-btn-accent-bg-hover: #ff9424;
    --ui-btn-accent-line: transparent;

    /*
       A second-tier action that still has to be found — 계좌문의, which a
       player goes looking for when a deposit has not landed. Carries the
       accent so it reads as an action rather than page furniture, but stays
       hollow so the filled submit beside it is still the loudest thing.
    */
    --ui-btn-outline-bg: color-mix(in srgb, var(--color-brand) 12%, transparent);
    --ui-btn-outline-ink: var(--color-brand);
    --ui-btn-outline-bg-hover: var(--color-brand);
    --ui-btn-outline-ink-hover: #ffffff;
    --ui-btn-outline-line: var(--color-brand);

    --ui-btn-quiet-bg: var(--color-alt);
    --ui-btn-quiet-ink: var(--color-ink);
    --ui-btn-quiet-bg-hover: var(--color-raise);
    --ui-btn-quiet-ink-hover: var(--color-ink-strong);
    --ui-btn-quiet-line: var(--color-line);
    --ui-btn-quiet-line-hover: color-mix(in srgb, var(--color-brand) 70%, transparent);

    /*
       전액 — the chip that fills the field with the whole balance. Same box as
       `quiet`; only the label carries the money colour, so it reads as the one
       amount chip in the row that is not a fixed step.
    */
    --ui-btn-gold-bg: var(--color-alt);
    --ui-btn-gold-ink: var(--color-gold);
    --ui-btn-gold-bg-hover: var(--color-raise);
    --ui-btn-gold-line: var(--color-line);

    --ui-btn-danger-bg: var(--color-danger);
    --ui-btn-danger-ink: var(--color-ink-strong);
    --ui-btn-danger-bg-hover: var(--color-danger-hover);
    --ui-btn-danger-line: transparent;

    --ui-alert-ok-bg: color-mix(in srgb, var(--color-up) 10%, transparent);
    --ui-alert-ok-ink: var(--color-up-text);
    --ui-alert-ok-line: color-mix(in srgb, var(--color-up) 40%, transparent);

    --ui-alert-bad-bg: color-mix(in srgb, var(--color-danger-text) 10%, transparent);
    --ui-alert-bad-ink: var(--color-danger-text);
    --ui-alert-bad-line: color-mix(in srgb, var(--color-danger-text) 40%, transparent);

    /* Neither good news nor a refusal — a standing condition the player has to
       know about. Carries the accent, since it says what to do next. */
    --ui-alert-info-bg: color-mix(in srgb, var(--color-brand) 10%, transparent);
    --ui-alert-info-ink: var(--color-ink-soft);
    --ui-alert-info-line: color-mix(in srgb, var(--color-brand) 40%, transparent);

    /* A caution rather than a refusal. Gold rather than the accent, because
       `info` is spoken for by "here is what to do next" and the two must not
       look the same. */
    --ui-alert-warn-bg: color-mix(in srgb, var(--color-gold) 10%, transparent);
    --ui-alert-warn-ink: var(--color-gold);
    --ui-alert-warn-line: color-mix(in srgb, var(--color-gold) 40%, transparent);
}