/*---------------------------------------------------------
    헤라 — the palette.

    ── What this file is for ─────────────────────────────

    Until it existed, this skin took 제우스's colours everywhere its own
    `screens*.css` did not reach. The list was not short and none of it was
    obviously wrong on a screenshot: the toast over a refused game launch, the
    `.rich` block that 공지사항 and 쪽지 render operator HTML into, all four
    event screens, and the vendor-recall control. They were 제우스's because
    the thirty-one `--color-*` tokens lived in `globals.css` as `@theme`, and
    that block was transcribed out of `1bet_v4` — the platform's palette *was*
    the first skin's.

    Every token below is a redeclaration, unlayered, so it beats `@theme`
    (which Tailwind emits into `@layer theme`) whatever the load order. Loaded
    first among this skin's global sheets, so the sheets after it can read
    `var(--color-…)` and get this skin's answer.

    ── Where the values come from ────────────────────────

    The export's own `slot.css` and the `--hera-*` set at the top of
    `screens.css`: `#11141d` page, `#1a1d2a` cards, `#2c3a56` rules, and cyan
    where the other skin is orange.

    **`--color-gold` is cyan here, and that is not a mistake.** The token means
    「money」 rather than 「the colour gold」 — it is what an amount is printed in
    — and this export prints amounts in `--primary-blue`
    (`.balance-display .money`). A skin whose money is green would put green
    here. Naming it after 제우스's answer is a wart the token inherited; the
    meaning is the one to follow.
---------------------------------------------------------*/

:root {
    --color-base: #11141d;
    --color-deep: #0d1018;
    --color-panel: #1a1d2a;
    --color-field: #10131c;
    --color-raise: #232838;
    --color-alt: #0d1018;
    --color-card: #1a1d2a;
    --color-sunk: #10131c;

    --color-line: #2c3a56;
    --color-line-soft: #232838;
    --color-line-tile: #2c3a56;
    --color-line-head: #182a47;

    --color-brand: #00bfff;
    --color-brand-glow: #b9ecff;
    --color-gold: #00bfff;
    --color-gold-alt: #63d2ff;

    --color-danger: #ef4444;
    --color-danger-hover: #dc2626;
    --color-danger-text: #f87171;
    --color-up: #22c55e;
    --color-up-text: #dcfce7;
    --color-down: #ef4444;
    --color-down-text: #fee2e2;
    --color-win: #60a5fa;

    --color-ink: #e0e7ff;
    --color-ink-strong: #ffffff;
    --color-ink-soft: #d7def5;
    --color-ink-nav: #8a9cb3;
    --color-ink-label: #8a9cb3;
    --color-ink-muted: #6d7c92;
    --color-ink-team: #8a9cb3;

    /* Pretendard for text and Poppins for headings, which is what
       `common.css` and the export's screen sheets ask for. The numeric face
       is shared: an amount is read the same way on both skins. */
    --font-sans: "Pretendard", "Noto Sans KR", sans-serif;
    --font-numeric: "Rajdhani", "Pretendard", sans-serif;
    --font-display: "Poppins", "Pretendard", sans-serif;
}

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

    Rounder and taller than the other skin's: this export's buttons are 8px
    radius and its controls sit at 46–52px, where 제우스's are 3px and 32–48.
    `page-shell.tsx` keeps the structure and neither skin's numbers.

    Nothing here restates a disabled treatment. That is
    `hera_v1/css/screens*.css`'s, where `--hera-off-*` already says it: a
    disabled control on this skin loses its hue rather than going
    translucent, because translucent is unreadable on this palette — measured,
    and pinned by `lib/hera-disabled-state.spec.ts`.
---------------------------------------------------------*/

:root {
    --ui-btn-radius: 8px;
    --ui-btn-h-sm: 36px;
    --ui-btn-h-md: 46px;
    --ui-btn-h-lg: 52px;

    --ui-btn-primary-bg: var(--color-brand);
    --ui-btn-primary-ink: #06121b;
    --ui-btn-primary-bg-hover: #33ccff;
    --ui-btn-primary-line: transparent;

    --ui-btn-accent-bg: var(--color-brand);
    --ui-btn-accent-ink: #06121b;
    --ui-btn-accent-bg-hover: #33ccff;
    --ui-btn-accent-line: transparent;

    --ui-btn-outline-bg: transparent;
    --ui-btn-outline-ink: var(--color-brand);
    --ui-btn-outline-bg-hover: var(--color-brand);
    --ui-btn-outline-ink-hover: #06121b;
    --ui-btn-outline-line: var(--color-brand);

    --ui-btn-quiet-bg: #232838;
    --ui-btn-quiet-ink: var(--color-ink-nav);
    --ui-btn-quiet-bg-hover: #2c3348;
    --ui-btn-quiet-ink-hover: var(--color-ink);
    --ui-btn-quiet-line: var(--color-line);
    --ui-btn-quiet-line-hover: var(--color-brand);

    --ui-btn-gold-bg: #232838;
    --ui-btn-gold-ink: var(--color-gold);
    --ui-btn-gold-bg-hover: #2c3348;
    --ui-btn-gold-line: var(--color-line);

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

    --ui-alert-ok-bg: rgba(34, 197, 94, 0.12);
    --ui-alert-ok-ink: #86efac;
    --ui-alert-ok-line: rgba(34, 197, 94, 0.4);

    --ui-alert-bad-bg: rgba(239, 68, 68, 0.12);
    --ui-alert-bad-ink: #fca5a5;
    --ui-alert-bad-line: rgba(239, 68, 68, 0.4);

    --ui-alert-info-bg: rgba(0, 191, 255, 0.1);
    --ui-alert-info-ink: var(--color-ink);
    --ui-alert-info-line: rgba(0, 191, 255, 0.4);

    --ui-alert-warn-bg: rgba(245, 158, 11, 0.12);
    --ui-alert-warn-ink: #fcd34d;
    --ui-alert-warn-line: rgba(245, 158, 11, 0.4);
}