/*---------------------------------------------------------
    아폴로 — the palette.

    ══ 두 층입니다 ══════════════════════════════════════════

    **바탕과 글자는 테마를 따릅니다.** 운영자가 고르개에서 화이트를 고르면
    밝아지고 슬레이트를 고르면 어두워집니다 — 포세이돈과 같은 구조이고,
    운영자가 원한 것이 그것입니다(「포세이돈처럼 색상 변환하는 구조로」).

    **금은 아폴로의 것입니다.** `--t-accent` 를 읽지 않습니다.

    처음에는 금을 테마 하나(`champagne`)로 등록해 강조색까지 테마에서
    받았습니다. 그 뒤 테마가 셋으로 정리되면서(슬레이트·에메랄드·화이트)
    샴페인은 화이트의 별칭이 되었고, 화이트의 강조색은 **파랑**입니다.
    그 순간 아폴로의 로그인 단추가 파래졌습니다.

    테마를 넷으로 되돌리지 않습니다 — 셋만 노출한다는 결정이 있었습니다.
    대신 금을 이 스킨의 상수로 둡니다. 제우스가 주황이고 헤라가 하늘색인
    것과 같은 뜻입니다: 그 색이 그 스킨의 이름입니다. 하이리밋을 따라 만든
    스킨이 금을 잃으면 만든 이유가 없어집니다.

    그래서 고르개는 아폴로에서 **밝고 어두움**을 바꿉니다. 금은 어느 바탕
    위에서도 금입니다 — 남색 위의 금이 처음 판이었고 그것도 나빠 보이지
    않았습니다.

    **게임사 카드만은 금까지 조합을 입습니다** (2026-10-14 운영자 요청:
    「스킨색 바꿔도 카지노 슬롯 카드에 배경이나 테두리는 색이 안바뀜」).
    카드는 사진을 얹는 무대라 조합을 고르면 같이 바뀌어야 하고, 모래에서는
    지금 그림 그대로입니다. 값은 `lib/site-themes.ts` 의 `apolloCardColors`
    가 셉니다 — 시트의 셈으로는 모래를 그대로 두면서 화이트를 따르게 할 수
    없어서입니다(그 머리말).

    ══ 서른한 개를 다 적는 이유 ═════════════════════════════

    안 적은 토큰은 플랫폼의 기본값, 곧 제우스의 팔레트로 떨어집니다.
    `skin-palette.spec.ts` 가 빠진 이름을 부릅니다.
---------------------------------------------------------*/

:root {
    /* ── 아폴로의 금, 세 단계 ─────────────────────────────
       하이리밋의 `:root` 변수에서 뜬 값을 노란 쪽으로 조금 옮긴 것.
       「거절」 빨강과 35° 넘게 떨어져야 색을 못 가리는 사람도 둘을
       가르는데, 원본 금은 29° 였습니다. 눈으로는 같은 샴페인입니다. */
    --apollo-gold: #c6ad86;
    --apollo-gold-deep: #aa7a3c;
    --apollo-gold-pale: #e3c9a6;
    --apollo-gold-soft: #fde9da;
    --apollo-gold-rgb: 198 173 134;
    /* 금 위의 글자. 흰 글자는 2.1:1 로 뭉개지고, 이 값은 8.9:1 입니다. */
    --apollo-gold-ink: #2a1c0c;

    /* ── 게임사 카드: 조합에서 ───────────────────────────
       대체값은 모래 위의 그림 그대로입니다. */
    --apollo-card-face-0: var(--t-apollo-face-0, #fffdf8);
    --apollo-card-face-1: var(--t-apollo-face-1, #f6eddf);
    --apollo-card-face-2: var(--t-apollo-face-2, #dfc49a);
    --apollo-card-shine: var(--t-apollo-shine, rgb(255 255 255 / 0.82));
    --apollo-card-edge: var(--t-apollo-edge, rgb(255 255 255 / 0.92));
    --apollo-card-shade-rgb: var(--t-apollo-shade-rgb, 42 28 12);
    --apollo-card-plate-0: var(--t-apollo-plate-0, #131923);
    --apollo-card-plate-1: var(--t-apollo-plate-1, #252d39);
    --apollo-card-plate-2: var(--t-apollo-plate-2, #323847);
    --apollo-card-tone: var(--t-apollo-tone, var(--apollo-gold));
    --apollo-card-tone-rgb: var(--t-apollo-tone-rgb, var(--apollo-gold-rgb));
    --apollo-card-line: var(--t-apollo-line, rgb(0 0 0 / 0.16));

    /* ── 바탕: 테마에서 ───────────────────────────────── */
    --color-base: var(--t-base, #f7f7f7);
    --color-deep: color-mix(in srgb, var(--t-base, #f7f7f7) 96%, #000);
    --color-panel: var(--t-panel, #ffffff);
    --color-field: var(--t-sunk, #f0f0f0);
    --color-raise: color-mix(
        in srgb,
        var(--t-panel, #ffffff) 92%,
        rgb(var(--t-veil-rgb, 0 0 0))
    );
    --color-alt: color-mix(in srgb, var(--t-base, #f7f7f7) 96%, #000);
    --color-card: var(--t-panel, #ffffff);
    --color-sunk: var(--t-sunk, #f0f0f0);

    /* ── 칸막이: 테마의 겹침 색으로 ─────────────────────── */
    --color-line: rgb(var(--t-veil-rgb, 0 0 0) / 0.13);
    --color-line-soft: rgb(var(--t-veil-rgb, 0 0 0) / 0.08);
    --color-line-tile: rgb(var(--t-veil-rgb, 0 0 0) / 0.16);
    --color-line-head: var(--apollo-gold);

    /* ── 강조와 돈: 아폴로의 금 ──────────────────────────── */
    --color-brand: var(--apollo-gold);
    --color-brand-glow: var(--apollo-gold-soft);
    /*
     * 글자로 쓰는 금은 조합을 따릅니다.
     *
     * `--apollo-gold-deep` 한 값으로 두면 어느 조합에서도 4.5:1 을 못 넘습니다
     * — 어두운 판에서 4.1, 흰 판에서 3.8. 금이 흰 바탕에서 더 갈 곳이 없기
     * 때문입니다. 조합의 글자색 쪽으로 반씩 섞으면 밝은 쪽에서 5.4, 어두운
     * 쪽에서 10 으로 양쪽에 섭니다. 면으로 쓰는 금(`--color-brand`)은 그대로
     * `--apollo-gold` 입니다 — 그 위의 글자는 `--apollo-gold-ink` 니까요.
     */
    --color-gold: color-mix(in srgb, var(--apollo-gold) 50%, var(--color-ink));
    --color-gold-alt: var(--apollo-gold);

    /* ── 뜻이 있는 색 ─────────────────────────────────── */
    /*
     * 면으로 쓰는 값은 고정, **글자로 쓰는 값은 조합을 따릅니다.**
     *
     * 「지급 없음」의 빨강이 고정 `#b03830` 이라 어두운 조합에서 2.3:1 로
     * 내려앉았습니다 — 그 화면에서 가장 안 읽히는 글자가 하필 「이 보너스는
     * 안 나갑니다」였습니다. 조합의 글자색 쪽으로 섞으면 밝은 쪽에서 7.4,
     * 어두운 쪽에서 6.3 으로 양쪽에 섭니다.
     */
    --color-danger: #d0473f;
    --color-danger-hover: #b83a33;
    --color-danger-text: color-mix(
        in srgb,
        var(--color-danger) 62%,
        var(--color-ink)
    );
    --color-up: #2f8b55;
    --color-up-text: color-mix(in srgb, var(--color-up) 70%, var(--color-ink));
    --color-down: #d0473f;
    --color-down-text: color-mix(
        in srgb,
        var(--color-down) 62%,
        var(--color-ink)
    );
    --color-win: var(--color-gold);

    /* ── 글자: 테마에서 ───────────────────────────────── */
    --color-ink: var(--t-ink, #333333);
    --color-ink-strong: color-mix(in srgb, var(--t-ink, #333333) 82%, #000);
    --color-ink-soft: color-mix(in srgb, var(--t-ink, #333333) 88%, transparent);
    --color-ink-nav: var(--t-ink-muted, #666f8d);
    --color-ink-label: var(--t-ink-muted, #666f8d);
    --color-ink-muted: var(--t-ink-muted, #666f8d);
    --color-ink-team: var(--t-ink-muted, #666f8d);

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

/*---------------------------------------------------------
    공용 부품들.

    금을 **채움**으로 쓰는 곳은 으뜸 단추 하나입니다. 나머지 금은 테두리와
    글자로만 씁니다 — 금은 넓게 칠할수록 싸 보이고 가늘게 쓸수록 비싸
    보입니다.
---------------------------------------------------------*/

: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(--apollo-gold);
    --ui-btn-primary-ink: var(--apollo-gold-ink);
    --ui-btn-primary-bg-hover: var(--apollo-gold-deep);
    --ui-btn-primary-line: transparent;

    --ui-btn-accent-bg: var(--apollo-gold);
    --ui-btn-accent-ink: var(--apollo-gold-ink);
    --ui-btn-accent-bg-hover: var(--apollo-gold-deep);
    --ui-btn-accent-line: transparent;

    --ui-btn-outline-bg: transparent;
    --ui-btn-outline-ink: var(--apollo-gold-deep);
    --ui-btn-outline-bg-hover: var(--apollo-gold);
    --ui-btn-outline-ink-hover: var(--apollo-gold-ink);
    --ui-btn-outline-line: var(--apollo-gold);

    --ui-btn-quiet-bg: var(--color-panel);
    --ui-btn-quiet-ink: var(--color-ink-nav);
    --ui-btn-quiet-bg-hover: var(--color-raise);
    --ui-btn-quiet-ink-hover: var(--color-ink);
    --ui-btn-quiet-line: var(--color-line);
    --ui-btn-quiet-line-hover: var(--apollo-gold);

    --ui-btn-gold-bg: var(--color-panel);
    --ui-btn-gold-ink: var(--color-gold);
    --ui-btn-gold-bg-hover: var(--color-raise);
    --ui-btn-gold-line: var(--color-line-head);

    --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(47, 139, 85, 0.1);
    --ui-alert-ok-ink: #1e5c38;
    --ui-alert-ok-line: rgba(47, 139, 85, 0.32);

    --ui-alert-bad-bg: rgba(208, 71, 63, 0.1);
    --ui-alert-bad-ink: #b03830;
    --ui-alert-bad-line: rgba(208, 71, 63, 0.32);

    --ui-alert-info-bg: rgb(var(--apollo-gold-rgb) / 0.12);
    --ui-alert-info-ink: var(--color-ink);
    --ui-alert-info-line: rgb(var(--apollo-gold-rgb) / 0.38);

    --ui-alert-warn-bg: rgba(191, 138, 43, 0.12);
    --ui-alert-warn-ink: #8a6109;
    --ui-alert-warn-line: rgba(191, 138, 43, 0.36);

}