/* =========================================================================
   tokens.css — 27o.poker のデザイントークン
   2026-10-06 の C 案「面で分ける」を、2026-10-16 にブラッシュアップ(比較は design-lab/refresh/)。
   段の役割: 1–2 背景 / 3–5 部品の背景 / 6–8 罫線 / 9–10 塗り / 11–12 文字。
   --sage-* は名前だけ C 案のまま残し、中身はわずかに暖かい中立グレー(各ページの <style> が直接参照しているため)。

   テーマ: <html data-theme="light|dark"> で固定、属性なしなら OS の設定に従う(theme.js が付け外しする)。
   古い iOS(17.5 未満)でも動くよう light-dark() は使わず、ダークの値を 2 か所に書いている。
   ダークの値を変えるときは、下の @media と [data-theme="dark"] の両方を同じように直すこと。

   文字の濃さ: --c-fg-muted / --c-fg-subtle は背景 1〜3 の上で WCAG AA(4.5:1)以上になるよう決めてある。
   書体: IBM Plex Sans JP + IBM Plex Mono(Google Fonts で 400 / 500 / 600 を読む。700 以上を指定すると 600 で出る)。
   ========================================================================= */

:root {
  color-scheme: light;

  /* ---- 原色(ライト) ---- */
  --sage-1: #ffffff; --sage-2: #f5f5f3; --sage-3: #ededea; --sage-4: #e5e5e1;
  --sage-5: #dcdcd7; --sage-6: #d2d2cc; --sage-7: #c2c2bb; --sage-8: #a6a69e;
  --sage-9: #85857e; --sage-10: #67675f; --sage-11: #55554f; --sage-12: #1a1a18;
  --amber-2: #fdf8e8; --amber-3: #fdf3d0; --amber-4: #fbe7a6; --amber-6: #ecd38a;
  --amber-7: #e2c06a; --amber-9: #f5b82e; --amber-11: #935400; --amber-12: #4a3214;
  --red-2: #fdf0f0; --red-3: #fbe4e4; --red-6: #f3c2c2; --red-9: #dc3e42; --red-11: #c4282d;
  --grass-3: #eaf5ea; --grass-6: #bfdcc2; --grass-9: #3e9b51; --grass-11: #257034;
  --c-primary-hover: #33332f;
  --c-shadow: rgb(26 26 24 / .10);

  /* ---- 意味トークン ---- */
  --c-bg: var(--sage-1);
  --c-bg-subtle: var(--sage-2);
  --c-surface: var(--sage-2);
  --c-surface-2: var(--sage-3);
  --c-surface-hover: var(--sage-3);
  --c-surface-active: var(--sage-4);
  --c-border: var(--sage-4);
  --c-border-strong: var(--sage-6);
  --c-border-input: var(--sage-6);
  --c-fg: var(--sage-12);
  --c-fg-muted: var(--sage-11);
  --c-fg-subtle: var(--sage-10);
  --c-primary: var(--sage-12);
  --c-on-primary: var(--sage-1);
  --c-focus: var(--sage-12);
  --c-selection: var(--amber-4);
  --c-input-bg: var(--sage-1);
  --c-gutter-bg: transparent;
  --c-canvas: var(--sage-2);
  --c-warning-bg: var(--amber-2);
  --c-warning-border: transparent;
  --c-warning-fg: var(--amber-11);
  --c-danger-bg: var(--red-2);
  --c-danger-border: transparent;
  --c-danger-fg: var(--red-11);
  --c-danger-solid: var(--red-9);
  --c-success-bg: var(--grass-3);
  --c-success-border: transparent;
  --c-success-fg: var(--grass-11);
  --c-info-bg: var(--sage-2);
  --c-info-border: transparent;
  --c-info-fg: var(--sage-11);
  --c-ok: var(--grass-9);
  --c-pro-bg: transparent;
  --c-pro-fg: var(--amber-11);
  --c-pro-border: var(--amber-7);
  --c-rule: var(--sage-4);      /* 区切りの細線(面ではなく線で区切る所だけ) */

  /* ---- 文字 ---- */
  --font-sans: "IBM Plex Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 21px;
  --text-2xl: 26px;
  --text-3xl: 32px;
  --text-code: 13px;
  --leading-body: 1.8;
  --leading-ui: 1.5;
  --leading-heading: 1.35;
  --leading-code: 1.7;
  --tracking-body: .03em;
  --tracking-ui: .02em;
  --tracking-heading: .02em;
  --tracking-caps: .08em;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 600;
  --weight-heading: 600;

  /* ---- 余白 ---- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-8: 40px; --space-10: 64px;
  /* 左右の余白。iPhone のホーム画面アプリ(viewport-fit=cover。theme.js)の横向きでは、ノッチと角の分(安全領域)まで広げる。ほかでは env() が 0 */
  --safe-x: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --gutter: max(32px, var(--safe-x));

  /* ---- 角丸(ピルをやめる) ---- */
  --radius-sm: 4px;
  --radius-control: 8px;
  --radius-field: 8px;
  --radius-box: 10px;
  --radius-card: 12px;
  --radius-badge: 4px;
  --radius-image: 8px;
  --radius-full: 9999px;

  /* ---- 影(浮くものだけ) ---- */
  --shadow-sm: 0 1px 2px var(--c-shadow);
  --shadow-lg: 0 16px 40px -12px var(--c-shadow);
  --shadow-image: 0 1px 2px var(--c-shadow), 0 12px 32px -16px var(--c-shadow);
  --shadow-focus: 0 0 0 3px var(--sage-5);

  /* ---- 寸法 ---- */
  --border-w: 1px;
  --control-h: 38px;
  --control-h-sm: 30px;
  --badge-h: 20px;
  --header-h: 60px;
  --page-max: 1040px;
  --page-max-wide: 1440px;
}

/* ---- 原色(ダーク)。下の [data-theme="dark"] と同じ値 ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --sage-1: #111110; --sage-2: #1d1d1b; --sage-3: #272725; --sage-4: #2f2f2c;
    --sage-5: #383835; --sage-6: #42423e; --sage-7: #50504b; --sage-8: #66665f;
    --sage-9: #76766f; --sage-10: #8f8f88; --sage-11: #b8b8b1; --sage-12: #ededea;
    --amber-2: #221c10; --amber-3: #2a2112; --amber-4: #3a2c10; --amber-6: #5a4419;
    --amber-7: #7a5d22; --amber-9: #f5b82e; --amber-11: #f5c04a; --amber-12: #fbe3ae;
    --red-2: #241516; --red-3: #2a1617; --red-6: #5e2629; --red-9: #e5484d; --red-11: #ff9592;
    --grass-3: #17241a; --grass-6: #2b4a32; --grass-9: #46a758; --grass-11: #7bcf8b;
    --c-primary-hover: #ffffff;
    --c-shadow: rgb(0 0 0 / .5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --sage-1: #111110; --sage-2: #1d1d1b; --sage-3: #272725; --sage-4: #2f2f2c;
  --sage-5: #383835; --sage-6: #42423e; --sage-7: #50504b; --sage-8: #66665f;
  --sage-9: #76766f; --sage-10: #8f8f88; --sage-11: #b8b8b1; --sage-12: #ededea;
  --amber-2: #221c10; --amber-3: #2a2112; --amber-4: #3a2c10; --amber-6: #5a4419;
  --amber-7: #7a5d22; --amber-9: #f5b82e; --amber-11: #f5c04a; --amber-12: #fbe3ae;
  --red-2: #241516; --red-3: #2a1617; --red-6: #5e2629; --red-9: #e5484d; --red-11: #ff9592;
  --grass-3: #17241a; --grass-6: #2b4a32; --grass-9: #46a758; --grass-11: #7bcf8b;
  --c-primary-hover: #ffffff;
  --c-shadow: rgb(0 0 0 / .5);
}