/* ==========================================================================
   K9 Harmony — Design Tokens (v0.7.1, 2026-04-30 確定)
   正本: k9-liff src/assets/styles/main.css の @theme ブロック
   方針: design-spec.md §17.8 に準拠、k9-liff の 9 段階カラースケールを踏襲
   ========================================================================== */

:root {
  /* ==========================================================================
     K9 ブランドカラー — Turquoise（Primary、500=#57C3C2）
     ========================================================================== */
  --color-k9-turquoise-50:  #edf8f8;
  --color-k9-turquoise-100: #d4efef;
  --color-k9-turquoise-200: #aee1e1;
  --color-k9-turquoise-300: #88d3d2;
  --color-k9-turquoise-400: #6fcbc9;
  --color-k9-turquoise-500: #57C3C2;  /* ブランドメインカラー */
  --color-k9-turquoise-600: #4AB0AF;  /* ホバー時 */
  --color-k9-turquoise-700: #3d9392;
  --color-k9-turquoise-800: #306c6b;
  --color-k9-turquoise-900: #234545;

  /* ==========================================================================
     K9 ブランドカラー — Ocean（Secondary、500=#2F5D62）
     ========================================================================== */
  --color-k9-ocean-50:  #e9eeef;
  --color-k9-ocean-100: #c8d5d7;
  --color-k9-ocean-200: #a3b9bc;
  --color-k9-ocean-300: #7e9da1;
  --color-k9-ocean-400: #5f8489;
  --color-k9-ocean-500: #2F5D62;  /* サブカラー（深み） */
  --color-k9-ocean-600: #284f53;
  --color-k9-ocean-700: #214144;
  --color-k9-ocean-800: #1a3335;
  --color-k9-ocean-900: #132526;

  /* ==========================================================================
     K9 ブランドカラー — Copper（Accent、500=#C87A56）
     ========================================================================== */
  --color-k9-copper-50:  #fdf5f0;
  --color-k9-copper-100: #f9e6db;
  --color-k9-copper-200: #f2ccb5;
  --color-k9-copper-300: #eba38f;
  --color-k9-copper-400: #d78e72;
  --color-k9-copper-500: #C87A56;  /* アクセントカラー（温かみ） */
  --color-k9-copper-600: #a86348;
  --color-k9-copper-700: #884c3a;
  --color-k9-copper-800: #68352c;
  --color-k9-copper-900: #48231e;

  /* ==========================================================================
     セマンティックカラー（k9-liff 踏襲）
     ========================================================================== */
  --color-success: #7ED321;   /* 成功・空きあり */
  --color-warning: #F5A623;   /* 警告・わずか */
  --color-error:   #D0021B;   /* エラー・満席 */
  --color-info:    #1E88E5;   /* 情報 */

  /* ==========================================================================
     既存テーマ互換エイリアス（base.css／sections.css 等の既存参照を維持）
     ========================================================================== */
  --c-main-turquoise: var(--color-k9-turquoise-500);   /* #57C3C2 */
  --c-sub-deep-ocean: var(--color-k9-ocean-500);       /* #2F5D62 */
  --c-accent-copper:  var(--color-k9-copper-500);      /* #C87A56 */

  /* 白・黒・グレー（ブランド公式、2026-05-13 平田淳氏確定 fix53 でブランドグレー追加） */
  --c-brand-white: #FAFAFA;   /* 和紙 */
  --c-brand-black: #333333;   /* 墨 */
  --c-brand-gray:  #555555;   /* ブランドグレー（本文サブテキスト・WCAG AA 達成: 白背景上で 7.46:1） */

  /* ==========================================================================
     派生背景色（白基調）
     ========================================================================== */
  --c-base-washi: #FAFAFA;    /* ページ背景 */
  --c-bg-mist:    #F4F7F7;    /* セクション背景（淡ミント） */
  --c-bg-mint:    #E8F5F5;    /* 強調背景 */
  --c-bg-light:   #F8F9FA;    /* 軽い背景 */

  /* CVR 補強（暖色レイヤー、既存テーマから継承） */
  --c-warm-cream:  #FDF8F3;
  --c-warm-peach:  #FAF0E8;
  --c-copper-pale: #F5E8DF;
  --c-copper-mid:  #E8C4A8;

  /* ==========================================================================
     テキスト色
     ========================================================================== */
  --c-text-sumi: #333333;     /* 本文（ブランド黒、--c-brand-black 同値） */
  --c-text-gray: var(--c-brand-gray);  /* サブテキスト（2026-05-13 fix54 で --c-brand-gray #555 にエイリアス統合、既存使用箇所互換維持、WCAG AA 7.46:1 達成） */
  --c-text-body: #444444;     /* ボディテキスト */

  /* ==========================================================================
     ボーダー色
     ========================================================================== */
  --c-border-color: #DEE2E6;
  --c-border-light: #E9ECEF;

  /* ==========================================================================
     タイポグラフィ（k9-liff 準拠：Hiragino 優先順）
     ========================================================================== */
  --font-family-sans: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  --font-sans-jp:     'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  --font-serif-jp:    'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  --font-sans-en:     'Lato', 'Helvetica Neue', sans-serif;
  --font-serif-en:    'Cormorant Garamond', 'Times New Roman', serif;

  /* ==========================================================================
     タイポスケール 9 段階（design-spec.md §17.8.4 v0.7.10、Major Third 1.25 ベース）
     T1=10 / T2=12 / T3=14 / T4=16 / T5=20 / T6=26 / T7=36 / T8=48 / T9=64
     ========================================================================== */
  --fs-t1: 10px;                            /* 注意書き: legal / 補足注記 */
  --fs-t2: 12px;                            /* キャプション: meta / nav / eyebrow */
  --fs-t3: 14px;                            /* 本文小: サブテキスト / FAQ 答え */
  --fs-t4: 16px;                            /* 本文: 一般テキスト */
  --fs-t5: 20px;                            /* 小見出し: h4 / カード見出し */
  --fs-t6: clamp(18px, 2.2vw, 26px);        /* 中見出し: 目立つ本文（empathy / method 縦書き） */
  --fs-t7: clamp(24px, 3vw, 36px);          /* セクションキャッチ: 装飾的キャッチコピー（汎用） */
  --fs-t8: clamp(32px, 4vw, 48px);          /* h2 sub: sec2/sec3/sec4 主要 h2 */
  --fs-t9: clamp(40px, 5.5vw, 64px);        /* h1 / h2 主要: HERO h1 / sec5/sec6 h2 */

  /* レガシートークン（既存コード互換用、9 段階エイリアス） */
  --fs-h1:      var(--fs-t9);               /* T9: HERO h1 */
  --lh-h1:      1.3;
  --fs-h2:      clamp(36px, 5vw, 64px);     /* T9 相当（既存値維持、Sec5/Sec6 sec-header h2） */
  --lh-h2:      1.4;
  --fs-h3:      clamp(18px, 2.4vw, 24px);   /* T4-T5 中間（汎用 h3） */
  --lh-h3:      1.5;
  --fs-body:    var(--fs-t4);               /* T4: 16px */
  --lh-body:    1.7;
  --fs-caption: var(--fs-t2);               /* T2: 12px */
  --lh-caption: 1.5;

  /* フォントサイズ scale（汎用、k9-liff 互換） */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;

  /* ==========================================================================
     スペーシング（k9-liff 準拠）
     ========================================================================== */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* ==========================================================================
     ボーダー半径（両者一致）
     ========================================================================== */
  --radius-xs:   2px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   15px;
  --radius-pill: 50px;

  /* ==========================================================================
     シャドウ（両者一致＋ブランドカラーグロウ追加）
     ========================================================================== */
  --shadow-sm:   0 2px 5px rgba(0, 0, 0, 0.05);
  --shadow-md:   0 4px 10px rgba(0, 0, 0, 0.1);
  --shadow-lg:   0 10px 20px rgba(0, 0, 0, 0.15);
  --shadow-warm: 0 8px 32px rgba(200, 122, 86, 0.15);
  /* ブランドカラーグロウ（hover 時の発光・カード強調用） */
  --shadow-glow-turquoise:      0 8px 24px rgba(87, 195, 194, 0.15);
  --shadow-glow-turquoise-soft: 0 6px 18px rgba(87, 195, 194, 0.25);
  --shadow-glow-turquoise-hover:0 8px 20px rgba(87, 195, 194, 0.3);
  --shadow-glow-copper:         0 8px 24px rgba(200, 122, 86, 0.10);
  /* ヘッダー border-style 影 */
  --shadow-header-border: 0 1px 0 rgba(47, 93, 98, 0.08);
  /* オーバーレイ控えめ影 */
  --shadow-overlay: 0 4px 14px rgba(0, 0, 0, 0.08);

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

  /* ==========================================================================
     プレミアム Easing（既存テーマから継承）
     ========================================================================== */
  --ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart:    cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ==========================================================================
     プレミアム Spacing（既存テーマから継承、セクション余白）
     ========================================================================== */
  --sec-pad-desktop: 120px;
  --sec-pad-tablet:  80px;
  --sec-pad-mobile:  56px;
}