/* ==========================================================================
   G-TEC Design System | tokens.css
   案C: Charcoal × Deep Wine × Old Gold
   "寡黙な職人の火 — 言葉少なに、腕で語る"
   ========================================================================== */

:root {
  /* ---- カラーパレット ---- */
  --c-bg           : #1a1a1a;  /* ベース背景（Charcoal） */
  --c-bg-elevated  : #232323;  /* カード等の少し明るい背景 */
  --c-bg-card      : #2a2a2a;  /* カード主背景 */
  --c-bg-deep      : #0f0f0f;  /* フッター等の最も暗い背景 */
  --c-bg-soft      : #2f2628;  /* セクション交互配色用（wineを少し混ぜた暗色） */

  --c-primary      : #8b1a1a;  /* Deep Wine（主要CTA・強調） */
  --c-primary-hover: #a82a2a;  /* Wine hover */
  --c-primary-soft : rgba(139, 26, 26, 0.12);  /* Wine の透かし */

  --c-gold         : #c0a875;  /* Old Gold（アクセント・上質感） */
  --c-gold-hover   : #d4bc8c;
  --c-gold-soft    : rgba(192, 168, 117, 0.15);
  --c-gold-line    : rgba(192, 168, 117, 0.25);

  --c-text         : #f5f1ea;  /* Cream White（本文テキスト、50-60代でも読みやすく明るめ） */
  --c-text-sub     : #d0cac2;  /* Warm Gray（サブテキスト、コントラスト比 約11:1でAAA準拠） */
  --c-text-muted   : #9e9892;  /* 最も薄い説明文でもAA準拠する水準 */

  --c-line         : rgba(192, 168, 117, 0.2);
  --c-border       : #3a3a3a;
  --c-border-soft  : rgba(255, 255, 255, 0.08);

  /* ---- 外部ブランドカラー（LINE用） ---- */
  --c-line-green   : #06C755;  /* LINE 公式ブランドカラー */
  --c-line-green-d : #059D44;  /* LINE hover */

  /* ---- フォント ---- */
  --f-sans    : "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --f-serif   : "Noto Serif JP", "游明朝", YuMincho, "Hiragino Mincho ProN", serif;
  --f-display : "Playfair Display", "Noto Serif JP", serif;
  --f-en      : "Inter", "Helvetica Neue", Arial, sans-serif;

  /* ---- 間隔（8の倍数システム） ---- */
  --s-xs : 4px;
  --s-sm : 8px;
  --s-md : 16px;
  --s-lg : 24px;
  --s-xl : 32px;
  --s-2xl: 48px;
  --s-3xl: 64px;
  --s-4xl: 96px;
  --s-5xl: 128px;

  /* ---- コンテナ幅 ---- */
  --w-container : 1200px;
  --w-narrow    : 720px;
  --w-wide      : 1440px;

  /* ---- ブレークポイント（情報用、@media は数値を直接記載） ---- */
  --bp-mobile : 640px;
  --bp-tablet : 768px;
  --bp-laptop : 1024px;
  --bp-desktop: 1280px;

  /* ---- トランジション ---- */
  --t-fast  : 0.2s ease;
  --t-base  : 0.3s ease;
  --t-slow  : 0.5s ease;

  /* ---- シャドウ ---- */
  --shadow-sm : 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md : 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg : 0 20px 40px rgba(139, 26, 26, 0.25);
  --shadow-gold: 0 0 0 1px var(--c-gold), 0 0 20px rgba(192, 168, 117, 0.25);

  /* ---- ボーダー角 ---- */
  --radius-none: 0;
  --radius-sm  : 2px;
  --radius-md  : 4px;

  /* ---- z-index ---- */
  --z-base    : 1;
  --z-sticky  : 100;
  --z-overlay : 500;
  --z-modal   : 1000;
}