/**
 * few. Design Tokens
 * Version: 1.0
 *
 * 使い方:
 *   各サービスのCSSで @import '../assets/tokens.css'; して使う。
 *   サービス固有の色は --color-service-* を上書きするだけでよい。
 */

:root {

  /* =============================================
   * COLOR — Neutral (全サービス共通)
   * System 3: Natural Mute
   * ============================================= */

  /* Backgrounds */
  --color-bg:             #F4F1EB;  /* ページ背景 */
  --color-surface:        #FFFFFF;  /* カード・パネル */
  --color-surface-sunken: #EDE9E2;  /* 凹んだ領域・区切り */

  /* Text */
  --color-text-primary:   #1E1B17;  /* 見出し・本文メイン */
  --color-text-secondary: #5A5248;  /* サブテキスト・ラベル */
  --color-text-muted:     #9A9289;  /* プレースホルダー・補足 */
  --color-text-inverse:   #FFFFFF;  /* 暗背景上のテキスト */

  /* Borders */
  --color-border:         #D6D1C8;  /* 通常の区切り線 */
  --color-border-light:   #EDE9E2;  /* 淡い区切り線 */

  /* Brand accent (few. ロゴ・ブランド見出し) */
  --color-brand-accent:   #5A5248;

  /* =============================================
   * COLOR — Service Primary
   * 各サービスのCSSで上書きして使う。
   * ルール: S 30–50% / L 38–50%
   *
   * 現時点のサービス:
   *   Gohan Anywhere → #BE4440
   * ============================================= */

  --color-service-primary:       #BE4440;
  --color-service-primary-hover: #A83835;
  --color-service-primary-light: #F5E8E7;  /* バッジ・薄い背景 */

  /* =============================================
   * TYPOGRAPHY
   * ============================================= */

  /* Font families */
  --font-brand:    'Outfit', -apple-system, sans-serif;       /* few. ブランド */
  --font-jp:       'Noto Sans JP', sans-serif;                /* 日本語テキスト */
  --font-system:   -apple-system, 'Segoe UI', sans-serif;     /* サービス既定 */
  --font-mono:     'Courier New', Courier, monospace;

  /* Font size scale */
  --text-2xs:  10px;
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;

  /* Font weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* Line heights */
  --leading-tight:   1.2;
  --leading-snug:    1.4;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* Letter spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.10em;
  --tracking-widest:   0.12em;

  /* =============================================
   * SPACING — Generous scale
   * 余白はゆったりめに。基本単位 8px。
   * ============================================= */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* よく使う組み合わせのショートハンド */
  --space-section-y:  var(--space-20);    /* セクション間の縦余白 */
  --space-card:       var(--space-8);     /* カード内パディング */
  --space-component:  var(--space-6);     /* コンポーネント間 */
  --space-element:    var(--space-4);     /* 要素間 */
  --space-inline:     var(--space-2);     /* インライン要素間 */

  /* =============================================
   * BORDER RADIUS
   * ============================================= */

  --radius-sm:   2px;
  --radius:      4px;   /* デフォルト — シャープ（全サービス共通） */
  --radius-md:   8px;   /* モーダル・オーバーレイ */
  --radius-full: 9999px; /* バッジ・ピル */

  /* =============================================
   * SHADOW
   * ============================================= */

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10);

  /* =============================================
   * Z-INDEX
   * ============================================= */

  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-toast:    400;

  /* =============================================
   * TRANSITION
   * ============================================= */

  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   340ms;
  --ease-default:    ease;
  --ease-out:        cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out:     cubic-bezier(0.4, 0.0, 0.2, 1);

}