/* CSS変数定義 — ライフキャンバス共通 (1rem = 14px) */

:root {
  /* フォントファミリー */
  --font-family: "LINE Seed JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --ff-en: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;


  /* フォントサイズ (SP下限〜広い画面の上限) */
  --font-xs:   clamp(0.714rem, 2.1vw, 0.857rem); /* 10〜12px */
  --font-sm:   clamp(0.857rem, 2.5vw, 1rem);     /* 12〜14px */
  --font-base: clamp(1rem,     2.9vw, 1.143rem); /* 14〜16px */
  --font-md:   clamp(1.143rem, 3.3vw, 1.286rem); /* 16〜18px */
  --font-lg:   clamp(1.286rem, 3.8vw, 1.429rem); /* 18〜20px */
  --font-xl:   clamp(1.429rem, 4.3vw, 1.571rem); /* 20〜22px */
  --font-2xl:  clamp(1.571rem, 4.7vw, 1.714rem); /* 22〜24px */
  --font-3xl:  clamp(1.714rem, 5.2vw, 2rem);     /* 24〜28px */
  --font-4xl:  clamp(2rem,     6vw,   2.286rem); /* 28〜32px */
  --font-5xl:  clamp(2.286rem, 6.8vw, 2.571rem); /* 32〜36px */


  /* ライン高 */
  --line-height-none:    1;
  --line-height-tight:   1.1;
  --line-height-snug:    1.2;
  --line-height-normal:  1.4;
  --line-height-relaxed: 1.5;
  --line-height-loose:   1.8;


  /* フォントウェイト */
  --font-weight-normal:  400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;
  --font-weight-black:   900;


  /* カラー (色名ベース / 1色 = 1変数) */
  --color-white:      #ffffff;
  --color-ink:        #383838;
  --color-ink-rgb:    56, 56, 56;
  --color-navy:       #182b4b;
  --color-navy-rgb:   24, 43, 75;
  --color-blue:       #004295;
  --color-blue-rgb:   0, 66, 149;
  --color-sky:        #eaf6ff;

  /* ロゴのブランドカラー (life compass) — メディアサイトで使用 */
  --color-coral:      #ff3e4d;        /* ロゴ赤 — アクセント / CTA */
  --color-coral-rgb:  255, 62, 77;
  --color-cyan:       #6cd7e7;        /* ロゴ水色 — 淡い面 (tint) */

  /* ブランドアクセント色。既定は ink。各ページが :root で上書き。 */
  --color-accent:     var(--color-ink);
  --color-accent-rgb: var(--color-ink-rgb);
  --color-orange:     #fe612c;
  --color-orange-rgb: 254, 97, 44;
  --color-amber:      #ffa12c;
  --color-yellow:     #ffff00;
  --color-yellow-rgb: 255, 255, 0;

  /* グレースケール: 数字が大きいほど暗い (100 = 最も明るい) */
  --color-gray-100:   #f4f4f4;
  --color-gray-200:   #ececec;
  --color-gray-300:   #e2e6ea;
  --color-gray-400:   #b5b5b5;  /* disabled 状態のボタン/枠線 */
  --color-gray-500:   #8c8c8c;  /* pending / muted text */
  --color-gray-600:   #757575;  /* deep gray (disabled label 等) */

  /* セマンティック (役割名でも参照できるエイリアス) */
  --color-disabled:       var(--color-gray-400);
  --color-text-disabled:  var(--color-gray-600);

  /* ステータス色 (予約枠の空き / フォーム必須・エラー等) */
  --color-success:        #22a95f;   /* 空きあり / OK */
  --color-error:          #e53935;   /* エラー / 必須 / NG */


  /* グラデーション */
  --gradient-orange: linear-gradient(to right, var(--color-orange), var(--color-amber));
  /* ブランドグラデーション (CTA)。既定オレンジ。各ページが :root で上書き。 */
  --gradient-accent:  var(--gradient-orange);


  /* スペーシング (1rem = 14px) */
  --space-3xs: 0.143rem;   /*  2px */
  --space-2xs: 0.286rem;   /*  4px */
  --space-xs:  0.429rem;   /*  6px */
  --space-sm:  0.571rem;   /*  8px */
  --space-md:  0.857rem;   /* 12px */
  --space-lg:  1.143rem;   /* 16px */
  --space-xl:  1.429rem;   /* 20px */
  --space-2xl: 1.714rem;   /* 24px */
  --space-3xl: 2.286rem;   /* 32px */
  --space-4xl: 2.857rem;   /* 40px */
  --space-5xl: 3.429rem;   /* 48px */
  --space-6xl: 4.571rem;   /* 64px */
  --space-7xl: 5.714rem;   /* 80px */

  --mobile-gutter: var(--space-lg);   /* = space-lg (16px) */


  /* ボーダー半径 */
  --border-radius-sm:   0.286rem;   /*  4px */
  --border-radius-md:   0.571rem;   /*  8px */
  --border-radius-lg:   0.857rem;   /* 12px */
  --border-radius-2xl:  1.714rem;   /* 24px */
  --border-radius-full: 100vw;


  /* シャドウ */
  --shadow-md:   0 4px 12px rgba(var(--color-blue-rgb), 0.15);
  --shadow-card: 0 6px 20px rgba(var(--color-navy-rgb), 0.1);


  /* トランジション */
  --duration-fast:   0.2s;
  --duration-base:   0.3s;
  --duration-slow:   0.6s;

  --easeOutCubic:   cubic-bezier(0.33, 1, 0.68, 1);

  --transition-base: var(--duration-base) var(--easeOutCubic);
  --transition-fast: var(--duration-fast) var(--easeOutCubic);


  /* コンテナ */
  --container-max-width: 402px;


  /* z-index 階層 (実使用は header のみ) */
  --z-header:     100;
}