/* ============================================================
 * tokens.semantic.css — 用途名トークン
 *
 * コンポーネントCSS（style.css / partials の <style>）は
 * **必ずこの層の変数のみ** を参照する。primitive (--c-*, --fs-* 等)
 * の直接参照は禁止。
 *
 * 命名規則: すべて `--ds-` プレフィックスを付ける。
 *   理由: 既存 `public/css/style.css` の `:root` で `--color-text`,
 *   `--color-bg`, `--color-border`, `--color-warning`, `--color-danger`
 *   等が定義済みのため、衝突を避ける目的で名前空間を分離。
 *
 * 新しい用途が必要になったら、まずここに行を追加してから
 * コンポーネント側で使うこと。コンポーネント側で生hex/生pxを
 * 書くのは禁止。
 * ============================================================ */

@import url("./tokens.primitive.css");

:root {
  /* ============ Background ============ */
  --ds-color-bg:           var(--c-white);     /* ページ本体 */
  --ds-color-bg-paper:     var(--c-paper);     /* セクション・カードの控えめな差分 */
  --ds-color-bg-elevated:  var(--c-white);     /* 浮き上がるカード（shadow併用） */
  --ds-color-bg-inverse:   var(--c-ink-black); /* ダーク反転（フッター等） */
  --ds-color-bg-subtle:    var(--c-gray-50);   /* 入力欄・disabled背景 */

  /* ============ Text ============ */
  --ds-color-text:          var(--c-ink-black); /* 主文 */
  --ds-color-text-muted:    var(--c-gray-600);  /* 補足 */
  --ds-color-text-subtle:   var(--c-gray-500);  /* キャプション・メタ */
  --ds-color-text-disabled: var(--c-gray-400);
  --ds-color-text-inverse:  var(--c-white);     /* ダーク背景上 */
  --ds-color-text-link:     var(--c-ink-black); /* リンクは色でなく下線で示す */

  /* ============ Border ============ */
  --ds-color-border:         var(--c-gray-200);
  --ds-color-border-strong:  var(--c-gray-300);
  --ds-color-border-inverse: var(--c-gray-800);

  /* ============ Accent (ホログラフィック・限定使用) ============
   * 用途: 属性チップbg / ヒーローの装飾線 / CTAのhover縁取り / 特集バッジ
   * 禁止: ページ背景・カード全面・通常テキスト
   * ============================================================ */
  --ds-color-accent-gradient: var(--c-holo-gradient);
  --ds-color-accent-pink:     var(--c-holo-pink);
  --ds-color-accent-sky:      var(--c-holo-sky);
  --ds-color-accent-cream:    var(--c-holo-cream);
  --ds-color-accent-mint:     var(--c-holo-mint);
  --ds-color-accent-lavender: var(--c-holo-lavender);
  --ds-color-accent-peach:    var(--c-holo-peach);

  /* ============ State (媒体用最小) ============ */
  --ds-color-positive: var(--c-positive-500); /* 「取扱あり」「公開済」等 */
  --ds-color-warning:  var(--c-warning-500);
  --ds-color-danger:   var(--c-danger-500);

  /* ============ Rating / Medal ============ */
  --ds-color-rating:        var(--c-gold-500);  /* ★ 星評価・1位等のメダル */
  --ds-color-rating-empty:  var(--c-gray-300);  /* ★ の空き状態 */

  /* ============ Badge background (単色パステル・1ページ内 2-3 色まで) ============ */
  --ds-color-badge-bg-mint:     var(--c-holo-mint);
  --ds-color-badge-bg-peach:    var(--c-holo-peach);
  --ds-color-badge-bg-cream:    var(--c-holo-cream);
  --ds-color-badge-bg-sky:      var(--c-holo-sky);
  --ds-color-badge-bg-pink:     var(--c-holo-pink);
  --ds-color-badge-bg-lavender: var(--c-holo-lavender);
  --ds-color-badge-text:        var(--c-ink-black);

  /* ============ Typography ============
   * 各 variant は size / lh / weight の3点セットで定義。
   * コンポーネント側では 3つを揃えて使う。
   * ============================================================ */
  --ds-text-display-size:   var(--fs-40);
  --ds-text-display-lh:     var(--lh-tight);
  --ds-text-display-weight: var(--fw-bold);

  --ds-text-h1-size:   var(--fs-32);
  --ds-text-h1-lh:     var(--lh-tight);
  --ds-text-h1-weight: var(--fw-bold);

  --ds-text-h2-size:   var(--fs-26);
  --ds-text-h2-lh:     var(--lh-tight);
  --ds-text-h2-weight: var(--fw-bold);

  --ds-text-h3-size:   var(--fs-20);
  --ds-text-h3-lh:     var(--lh-normal);
  --ds-text-h3-weight: var(--fw-bold);

  --ds-text-body-size:   var(--fs-16);
  --ds-text-body-lh:     var(--lh-loose);
  --ds-text-body-weight: var(--fw-regular);

  --ds-text-body-sm-size:   var(--fs-14);
  --ds-text-body-sm-lh:     var(--lh-normal);
  --ds-text-body-sm-weight: var(--fw-regular);

  --ds-text-caption-size:   var(--fs-13);
  --ds-text-caption-lh:     var(--lh-normal);
  --ds-text-caption-weight: var(--fw-regular);

  --ds-text-micro-size:   var(--fs-12);
  --ds-text-micro-lh:     var(--lh-tight);
  --ds-text-micro-weight: var(--fw-medium);

  /* ============ Spacing (用途別) ============ */
  --ds-space-stack-xs: var(--space-2);   /* 要素間 8px */
  --ds-space-stack-sm: var(--space-4);   /* 段落間 16px */
  --ds-space-stack-md: var(--space-6);   /* セクション内 24px */
  --ds-space-stack-lg: var(--space-12);  /* セクション間 48px */
  --ds-space-stack-xl: var(--space-20);  /* ページブロック間 80px */

  --ds-space-inline-xs: var(--space-1);
  --ds-space-inline-sm: var(--space-2);
  --ds-space-inline-md: var(--space-4);

  --ds-space-page-x:    var(--space-4);  /* モバイル左右パディング */
  --ds-space-page-x-md: var(--space-8);  /* タブレット以上 */

  /* ============ Radius (用途別) ============ */
  --ds-radius-card:   var(--radius-md);
  --ds-radius-input:  var(--radius-sm);
  --ds-radius-button: var(--radius-sm);
  --ds-radius-chip:   var(--radius-pill);
  --ds-radius-avatar: var(--radius-pill);

  /* ============ Border width (用途別) ============ */
  --ds-border-width:        var(--border-width-1);      /* デフォルトの罫線 */
  --ds-border-width-divider: var(--border-width-thick); /* ホロ装飾線などの太め */

  /* ============ Touch target ============ */
  --ds-touch-target-min:    var(--touch-target-min);    /* WCAG 最小タップ領域 */

  /* ============ Shadow (用途別) ============ */
  --ds-shadow-card:    var(--shadow-1);
  --ds-shadow-popover: var(--shadow-2);
  --ds-shadow-modal:   var(--shadow-3);

  /* ============ Layout (用途別) ============ */
  --ds-container-article: var(--container-narrow);
  --ds-container-page:    var(--container-base);
}