/**
 * variables.css
 * デザイントークン定義 — design-system/trattoria-nino/MASTER.md から生成
 *
 * ⚠️ このファイルを直接編集しないこと。
 *    値を変更する場合は design-system/trattoria-nino/MASTER.md を先に更新する。
 */

:root {

  /* ============================================================
     Color — カラーパレット（MASTER.md Global Rules）
     ============================================================ */

  /* コアカラー */
  --color-primary:    #DC2626; /* ディープレッド：強調・ブランド */
  --color-secondary:  #F87171; /* ソフトレッド：サブ強調 */
  --color-cta:        #CA8A04; /* ウォームゴールド：CTA・予約ボタン */
  --color-background: #FEF2F2; /* クリーム白：ページ背景 */
  --color-text:       #450A0A; /* ダークバーガンディ：本文テキスト */

  /* サーフェスカラー */
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #FDF6EC; /* 薄いクリーム：セクション背景切り替え */
  --color-border:        #E8D5C4;
  --color-border-subtle: #F3E8DA;

  /* テラコッタ系（Nature Distilled：素材感・温もり） */
  --color-terracotta: #C67B5C;
  --color-sand:       #D4C4A8;
  --color-clay:       #B5651D;
  --color-cream:      #F5F0E1;
  --color-olive:      #6B7B3C;

  /* テキストバリアント */
  --color-text-muted:     #7A4040;
  --color-text-on-dark:   #FEF2F2;
  --color-text-on-cta:    #FFFFFF;

  /* ============================================================
     Typography — フォントファミリー（MASTER.md Typography）
     ============================================================ */

  /* 欧文セリフ（イタリア語見出し・装飾テキスト） */
  --font-heading-latin: 'Playfair Display SC', 'Georgia', serif;

  /* 日本語セリフ（日本語見出し） */
  --font-heading-ja:    'Noto Serif JP', 'Yu Mincho', '游明朝', serif;

  /* 欧文サンセリフ（英数字本文） */
  --font-body-latin:    'Karla', 'Helvetica Neue', sans-serif;

  /* 日本語サンセリフ（日本語本文） */
  --font-body-ja:       'Noto Sans JP', 'Hiragino Kaku Gothic Pro', sans-serif;

  /* フォントウェイト */
  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold: 600;
  --font-weight-bold:    700;

  /* フォントサイズ（モバイルファースト） */
  --font-size-xs:   0.75rem;   /*  12px */
  --font-size-sm:   0.875rem;  /*  14px */
  --font-size-base: 1rem;      /*  16px */
  --font-size-md:   1.125rem;  /*  18px */
  --font-size-lg:   1.25rem;   /*  20px */
  --font-size-xl:   1.5rem;    /*  24px */
  --font-size-2xl:  2rem;      /*  32px */
  --font-size-3xl:  2.5rem;    /*  40px */
  --font-size-4xl:  3rem;      /*  48px */
  --font-size-5xl:  3.75rem;   /*  60px */

  /* 行間 */
  --line-height-tight:  1.2;
  --line-height-snug:   1.4;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.8;

  /* 文字間隔 */
  --letter-spacing-tight:  -0.02em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.05em;
  --letter-spacing-wider:   0.1em;
  --letter-spacing-widest:  0.2em;

  /* ============================================================
     Spacing — 余白トークン（MASTER.md Spacing Variables）
     ============================================================ */

  --space-xs:  0.25rem; /*  4px */
  --space-sm:  0.5rem;  /*  8px */
  --space-md:  1rem;    /* 16px */
  --space-lg:  1.5rem;  /* 24px */
  --space-xl:  2rem;    /* 32px */
  --space-2xl: 3rem;    /* 48px */
  --space-3xl: 4rem;    /* 64px */
  --space-4xl: 5rem;    /* 80px */
  --space-5xl: 6rem;    /* 96px */
  --space-6xl: 8rem;    /* 128px */

  /* ============================================================
     Shadow — 影（MASTER.md Shadow Depths）
     ============================================================ */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

  /* ウォームシャドウ（テラコッタ系） */
  --shadow-warm-sm: 0 2px 8px rgba(198, 123, 92, 0.15);
  --shadow-warm-md: 0 4px 16px rgba(198, 123, 92, 0.2);
  --shadow-warm-lg: 0 8px 32px rgba(198, 123, 92, 0.25);

  /* ============================================================
     Border Radius — 角丸
     ============================================================ */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ============================================================
     Transition — アニメーション速度（MASTER.md Key Effects）
     ============================================================ */

  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;
  --transition-slower: 500ms ease;

  /* ============================================================
     Layout — レイアウト
     ============================================================ */

  --container-max:    1440px;
  --container-inner:  1200px;
  --container-narrow:  760px;
  --container-px:     var(--space-md);  /* モバイル横パディング */

  /* ============================================================
     Z-Index — 重なり順（html-tailwind スタックガイドライン準拠）
     ============================================================ */

  --z-base:    0;
  --z-above:   10;
  --z-dropdown: 40;
  --z-nav:     50;
  --z-overlay: 60;
  --z-modal:   70;
  --z-toast:   80;

}