/* ひとコマ / Hitokoma — デザイントークン (SPEC.md §2 の単一の正)
   ダークモード固定。ライトモードは実装しない。
   本ファイルの値と Hitokoma/DesignSystem/Tokens.swift の値は完全に一致する。 */

:root {
  color-scheme: dark;

  /* ===== §2.1 色(15役割) ===== */
  --c-ink: #0B0B0D;              /* 地: 全画面の背景 */
  --c-surface: #1C1C20;          /* 面: カード/シート/入力欄 */
  --c-surface-raised: #26262B;   /* 面(上層): シート内のセル、選択状態 */
  --c-hairline: #3A3A40;         /* 罫: 境界線のみ。文字色禁止 */
  --c-paper: #F5F3EF;            /* 主要文字: 見出し/本文/ボタン文字 */
  --c-warm-gray: #B9B4AB;        /* 副文字: 補助説明。これより暗いグレーは禁止 */
  --c-shutter: #D93A2B;          /* シャッター・主要CTAのみ */
  --c-shutter-pressed: #B02D20;  /* 押下中の沈み */
  --c-deliver: #3FBF6F;          /* 送信済・成功 */
  --c-amber: #F5A623;            /* 未送信・残り3枚・警告 */
  --c-fail: #FF6B5A;             /* 恒久失敗・エラー文 */
  --c-aizome: #6E9BFF;           /* ホスト画面のリンク/進捗のみ。ゲスト画面で使用禁止 */
  --c-kinari: #E8D9B5;           /* 現像完了画面・PDF紙物の見出し罫 */
  --c-haku: #C9A96A;             /* PDF紙物の罫線のみ。画面では使用禁止 */
  --c-tobari: #05070C;           /* 帳: シャッター幕・モーダル暗幕 */

  /* SPEC §2.1 の表が定める「--c-shutter 上の白文字(4.6:1)」を役割名として明示する。
     --c-paper(#F5F3EF)を赤の上に載せると 4.13:1 となり §9 の 4.5:1 を満たさない。 */
  --c-on-shutter: #FFFFFF;
  /* --c-tobari(#05070C)を rgb() で不透明度付きに使うための分解。値は上の HEX と同一。
     グレーの生成には用いず、帳・暗幕・スクリムの重ねにのみ使う。 */
  --c-tobari-rgb: 5 7 12;

  /* ===== §2.2 タイポグラフィ ===== */
  --font-sans: "Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;
  --font-num: ui-monospace,"SF Mono",Menlo,monospace; /* font-variant-numeric: tabular-nums 必須 */

  /* 画面見出し 28px / 600 / 0 / 1.4 */
  --f-title: 28px;
  --f-title-weight: 600;
  --f-title-tracking: 0;
  --f-title-leading: 1.4;

  /* 節見出し 22px / 600 / 0 / 1.5 */
  --f-headline: 22px;
  --f-headline-weight: 600;
  --f-headline-tracking: 0;
  --f-headline-leading: 1.5;

  /* 本文 20px / 600 / 0 / 1.6 */
  --f-body: 20px;
  --f-body-weight: 600;
  --f-body-tracking: 0;
  --f-body-leading: 1.6;

  /* 補助 17px / 600 / 0 / 1.6 (これ未満のテキストを画面に置かない) */
  --f-caption: 17px;
  --f-caption-weight: 600;
  --f-caption-tracking: 0;
  --f-caption-leading: 1.6;

  /* ボタン 24px / 700 / +0.02em / 1.2 */
  --f-button: 24px;
  --f-button-weight: 700;
  --f-button-tracking: 0.02em;
  --f-button-leading: 1.2;

  /* 残枚数カウンター 64px / 700 / 0 / 1.0 */
  --f-counter: 64px;
  --f-counter-weight: 700;
  --f-counter-tracking: 0;
  --f-counter-leading: 1.0;

  /* 大カウント(ホスト集計) 40px / 700 / 0 / 1.1 */
  --f-stat: 40px;
  --f-stat-weight: 700;
  --f-stat-tracking: 0;
  --f-stat-leading: 1.1;

  /* ===== §2.3 角丸 ===== */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* ===== §2.3 影 ===== */
  --s-card: 0 2px 12px rgba(0,0,0,0.55);
  --s-sheet: 0 -8px 32px rgba(0,0,0,0.7);
  --s-pressed: inset 0 2px 6px rgba(0,0,0,0.6);

  /* ===== §2.3 余白 ===== */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ===== §2.3 モーション(跳ね返り/spring は全面禁止) ===== */
  --m-instant: 120ms;
  --m-instant-ease: cubic-bezier(0.22,0.61,0.36,1);
  --m-base: 200ms;
  --m-base-ease: cubic-bezier(0.22,0.61,0.36,1);
  --m-curtain-close: 160ms;
  --m-curtain-close-ease: cubic-bezier(0.4,0,1,1);
  --m-curtain-hold: 80ms;
  --m-curtain-open: 200ms;
  --m-curtain-open-ease: cubic-bezier(0,0,0.2,1);
  --m-sink: 400ms;
  --m-sink-ease: cubic-bezier(0.4,0,1,1);
  --m-develop: 700ms;
  --m-develop-ease: cubic-bezier(0.33,0,0.2,1);

  /* カウンターの巻き上げ(160ms・1回のみ)。reduce 時は即時差し替え */
  --m-counter-roll: 160ms;
}

/* ===== §2.2 タイポロール ユーティリティ ===== */
.t-title {
  font-family: var(--font-sans);
  font-size: var(--f-title);
  font-weight: var(--f-title-weight);
  letter-spacing: var(--f-title-tracking);
  line-height: var(--f-title-leading);
}

.t-headline {
  font-family: var(--font-sans);
  font-size: var(--f-headline);
  font-weight: var(--f-headline-weight);
  letter-spacing: var(--f-headline-tracking);
  line-height: var(--f-headline-leading);
}

.t-body {
  font-family: var(--font-sans);
  font-size: var(--f-body);
  font-weight: var(--f-body-weight);
  letter-spacing: var(--f-body-tracking);
  line-height: var(--f-body-leading);
}

.t-caption {
  font-family: var(--font-sans);
  font-size: var(--f-caption);
  font-weight: var(--f-caption-weight);
  letter-spacing: var(--f-caption-tracking);
  line-height: var(--f-caption-leading);
}

.t-button {
  font-family: var(--font-sans);
  font-size: var(--f-button);
  font-weight: var(--f-button-weight);
  letter-spacing: var(--f-button-tracking);
  line-height: var(--f-button-leading);
}

/* 数字ロール: --font-num + tabular-nums 必須 */
.t-counter {
  font-family: var(--font-num);
  font-size: var(--f-counter);
  font-weight: var(--f-counter-weight);
  letter-spacing: var(--f-counter-tracking);
  line-height: var(--f-counter-leading);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.t-stat {
  font-family: var(--font-num);
  font-size: var(--f-stat);
  font-weight: var(--f-stat-weight);
  letter-spacing: var(--f-stat-tracking);
  line-height: var(--f-stat-leading);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* 受付簿など、本文中の数字にも等幅数字を強制するための補助 */
.t-num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ===== §2.3 prefers-reduced-motion =====
   カウンターの巻き上げは即時差し替え、現像フェードは120msに短縮。
   帳の開閉だけは残す(撮影確定の唯一のフィードバックであるため)。 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --m-counter-roll: 0ms;
    --m-develop: 120ms;
    --m-instant: 0ms;
    --m-base: 0ms;
    --m-sink: 0ms;
    /* 帳(閉/静止/開)は短縮も無効化もしない */
  }
}