/*
 * KAFKACOFFEE SYSTEM — Design Tokens
 * assets/tokens.css · 全 surface で <link> または @import
 *
 * フォント方針（2026-05-11 確定）
 *   JP Display  : Shorai Sans (Monotype, geometric, Avenir Next 造形)
 *                 → web fallback: Zen Kaku Gothic New (Google Fonts)
 *   Latin Display: Shorai Sans Latin → Avenir Next (system) → DM Sans (web)
 *   Body        : Hiragino Sans (Mac) / BIZ UDPGothic (Win) — Yu Gothic 使用禁止
 *   Mono/System : IBM Plex Mono
 *   Matisse     : 却下（丸形ストローク端末）― 使用禁止
 *
 * ボーダー半径方針
 *   原則 0（鋭角）。LINE CTA のみ最大 2px を許容。
 */

/* ── Google Fonts: Zen Kaku Gothic New + DM Sans + IBM Plex Mono ── */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;700;900&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,700;0,9..40,900;1,9..40,400&family=IBM+Plex+Mono:wght@400;500;700&display=swap');

:root {
  /* ── PUBLIC surface (黒ブランド層) ── */
  --kcs-black:  #050505;
  --kcs-paper:  #f7f7f2;
  --kcs-muted:  rgba(247, 247, 242, 0.72);
  --kcs-line:   rgba(247, 247, 242, 0.30);
  --kcs-dim:    rgba(247, 247, 242, 0.10);

  /* ── INNER surface (クリーム運用層) ── */
  --kcs-ink:    #070706;
  --kcs-bg:     #f7f5ed;
  --kcs-milk:   #fffdf6;
  --kcs-soft:   rgba(7, 7, 6, 0.055);

  /* ── Brand state colors ── */
  --kcs-open:       #2d7a3a;   /* OPEN      */
  --kcs-last:       #d4860a;   /* LAST ORDER */
  --kcs-close:      #c0392b;   /* CLOSE     */
  --kcs-line-green: #06c755;   /* LINE 公式 */

  /* ── Typography ──────────────────────────────────
   *  --kcs-font-display : JP+EN ヘッドライン
   *  --kcs-font-latin   : EN のみ（ラベル・数値・CTAコピー）
   *  --kcs-font-body    : JP 本文
   *  --kcs-font-mono    : OXOX / 状態ラベル / 数値 / 時刻
   * ─────────────────────────────────────────────── */
  --kcs-font-display:
    "Shorai Sans", "A P-OTF Shorai Sans StdN",  /* Monotype — geometric, Avenir Next 造形 */
    "Zen Kaku Gothic New",                       /* Google Fonts — JP geometric fallback  */
    "Hiragino Sans",                             /* Mac / iOS — sharp system font         */
    "BIZ UDPGothic",                             /* Windows 10 1809+ — sharp, non-round  */
    system-ui, sans-serif;

  --kcs-font-latin:
    "Shorai Sans",       /* Monotype — Latin portion inherits Avenir Next DNA */
    "Avenir Next",       /* Apple system — geometric                          */
    "Avenir",
    "DM Sans",           /* Google Fonts — clean geometric web fallback       */
    system-ui, sans-serif;

  --kcs-font-body:
    "Hiragino Sans",     /* Mac / iOS — sharp                                 */
    "BIZ UDPGothic",     /* Windows 10 1809+ — sharp, non-round               */
    system-ui, sans-serif;
    /* NG: "Yu Gothic", "Yu Gothic UI", "Meiryo"
       游ゴシック は Windows で weight:400 時にストローク細化 + 字面が軟化し
       「丸形に見える」問題を引き起こすため使用禁止                            */

  --kcs-font-mono:
    "IBM Plex Mono",
    ui-monospace, monospace;

  /* ── Spacing & tracking ── */
  --kcs-tracking-label: 0.16em;
  --kcs-shell-pad:      clamp(18px, 4vw, 48px);
  --kcs-radius-sharp:   0;
  --kcs-radius-line:    2px;

  /* ── Motion tokens ── */
  --dur-micro:       80ms;
  --dur-fast:        160ms;
  --dur-normal:      300ms;
  --dur-slow:        500ms;
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-press:      cubic-bezier(0.4, 0, 1, 1);
}

html {
  background:  var(--kcs-black);
  color:       var(--kcs-paper);
  font-family: var(--kcs-font-display);
}