/* =============================================================================
   HoldemClub 意匠トークンと基底スタイル(設計書 v2.8 §9.1.1)

   全画面に効く「色・寸法・字」の唯一の出どころ。値の由来はロビー(Lobby.razor.css)と
   テーブル(TableView.razor.css)—— 既に動いている画面に他を合わせる。
   画面固有の CSS はここの変数を参照し、色や寸法を直書きしない。

   参照するアプリ:
     - HoldemClub.Client   (Blazor WASM)      wwwroot/index.html
     - HoldemClub.Identity (Razor Components) Components/App.razor
   ============================================================================= */

:root {
    /* ---- 地と面 ---- */
    --hc-bg: #0c0f15;           /* 画面の地 */
    --hc-bg-raised: #12161d;    /* シート・ドロワーなど地より一段上 */
    --hc-surface: #191d25;      /* カード・行の面 */
    --hc-surface-2: #1f242e;    /* 面の上に重ねる面 */
    --hc-line: #262c36;         /* 区切り線(装飾。文字ではないので低くてよい) */
    /* 操作できる部品(入力欄・ボタン・トグル)の輪郭。
       WCAG 1.4.11(非テキストは 3:1)を満たす明るさにする。面に対して 3.31、地に対して 3.77。 */
    --hc-line-control: #646f7f;
    --hc-line-soft: rgba(255, 255, 255, 0.08);
    --hc-sunken: rgba(0, 0, 0, 0.32);   /* 入力欄など凹んで見せる面 */

    /* ---- 文字 ---- */
    --hc-ink: #edf1f5;
    --hc-muted: #97a0ad;
    --hc-ink-invert: #23180a;   /* 金地の上に載せる文字 */

    /* ---- 差し色 ---- */
    --hc-gold: #c9a45c;
    --hc-gold-hi: #ecd6a0;
    --hc-gold-text: #f0d48a;
    --hc-neon: #2fe08a;         /* 進行中・肯定 */
    --hc-danger: #e0576b;
    --hc-danger-ink: #ff9aa8;
    --hc-warn: #e8b45c;

    /* ---- 卓の意匠(クラブ章・卓サムネ) ---- */
    --hc-felt-1: #b8447f;
    --hc-felt-2: #6d2450;
    --hc-rail: #1a1b22;
    --hc-room-1: #123038;       /* ヒーロー・上部クロームの地 */
    --hc-room-2: #071319;

    /* ---- 寸法 ---- */
    --hc-col: 430px;            /* 全画面共通の縦カラム幅の上限 */
    --hc-tap: 2.75rem;          /* タップ域の最小(44px) */
    --hc-row-h: 3rem;           /* 一覧の行の最小高さ(48px) */
    --hc-radius-s: 0.55rem;
    --hc-radius-m: 0.7rem;
    --hc-radius-l: 0.9rem;
    --hc-radius-xl: 1.15rem;
    --hc-gap-xs: 0.25rem;
    --hc-gap-s: 0.4rem;
    --hc-gap: 0.6rem;
    --hc-gap-l: 0.9rem;
    --hc-pad: 0.9rem;

    /* ---- 影 ---- */
    --hc-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.35);
    --hc-shadow-float: 0 10px 28px rgba(0, 0, 0, 0.45);

    /* ---- 字 ---- */
    --hc-font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, system-ui, -apple-system,
               "Segoe UI", Roboto, sans-serif;
    --hc-font-num: "SF Mono", "Roboto Mono", ui-monospace, monospace;

    color-scheme: dark;
}

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

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--hc-bg);
    color: var(--hc-ink);
    font-family: var(--hc-font);
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 700;
    line-height: 1.35;
}

h1 { font-size: 1.15rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: 0.95rem; }

p {
    margin: 0 0 0.6rem;
}

a {
    color: var(--hc-gold-text);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* 数字は桁が揃わないと残高・レートが読みにくい */
.hc-num,
.hc-amount {
    font-variant-numeric: tabular-nums;
}

/* フォーカスリングは全画面共通で金。キーボード操作時だけ出す */
:focus-visible {
    outline: 2px solid var(--hc-gold);
    outline-offset: 2px;
    border-radius: var(--hc-radius-s);
}

::selection {
    background: rgba(201, 164, 92, 0.35);
    color: #fff;
}

/* スクロールバー(WebKit)。暗い面の上で白い帯が浮かないようにする */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 3px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* 動きを減らす設定では回転・遷移を止める */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}