/*
 * K2R tokens.css — デザイントークンの唯一の正（design.md 準拠）
 *
 * design.md の §5カラー / §6タイポ / §8角丸 / §10余白 をここに集約する。
 * 値を変えたい時は design.md → このファイルの順で更新する（他CSSでは定義しない）。
 * 旧 site.css / lp.css が使う名前は「互換エイリアス」で残し、既存表示を壊さない。
 */

:root {
    /* ===== フォント（design.md §6） ===== */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
        "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;

    /* ===== カラー（design.md §5） ===== */
    --bg-white: #ffffff;
    --bg-light: #f5f5f5;

    --text-primary: #222222;
    --text-secondary: #5f6368;
    --text-muted: #8a8f98;

    --accent-primary: #234E70;   /* ブランドの紺 */
    --accent-secondary: #17395a; /* 濃い紺・hover / pressed */

    --line: #e5e7eb;
    --line-strong: #d1d5db;
    --line-brand: #06C755;       /* LINE緑 */

    /* 体験など主CTA専用の青グラデ（紺の土台とは別の目立ち色） */
    --cta-from: #003f9e;
    --cta-mid:  #0076f5;
    --cta-to:   #58b8ff;

    /* ===== タイポ（design.md §6） ===== */
    --font-body: 17px;
    --font-small: 14px;
    --font-button: 17px;
    --font-h4: 20px;
    --font-h1: clamp(34px, 5vw, 58px);
    --font-h2: clamp(30px, 4vw, 46px);
    --font-h3: clamp(22px, 3vw, 30px);

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* ===== 余白（design.md §10） ===== */
    --space-section-pc: 72px;
    --space-section-mobile: 52px;
    --space-heading: 32px;
    --space-content: 24px;

    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-6: 48px;
    --space-10: 80px;

    --container: 1200px;
    --container-padding-pc: 24px;
    --container-padding-mobile: 18px;

    /* ===== 角丸（design.md §8） ===== */
    --radius-button: 12px;  /* ボタン。完全なピルにはしない */
    --radius-card: 10px;    /* カード（8〜12pxの範囲） */

    /* ===== 互換エイリアス（旧 site.css / lp.css を壊さないため） ===== */
    --font-base: var(--font-body);            /* 旧16px → design.md 17px */
    --button-bg: var(--accent-primary);       /* 通常ボタン＝紺 */
    --button-text: #ffffff;                   /* ボタン文字＝白 */
    --button-hover: var(--accent-secondary);
    --accent-hover: var(--accent-secondary);  /* 旧#35608c(未使用)の受け皿 */
    --border-light: var(--line);              /* 旧#e5e5e5 */
    --border-medium: var(--line-strong);      /* 旧#dddddd */
    --spacing-1: var(--space-1);
    --spacing-2: var(--space-2);
    --spacing-3: var(--space-3);
    --spacing-4: var(--space-4);
    --spacing-6: var(--space-6);
    --spacing-10: var(--space-10);
}

/* モバイル：本文はそのまま17px、見出しを一段小さく（design.md §6 mobile） */
@media (max-width: 767px) {
    :root {
        --font-button: 16px;
        --font-h1: clamp(30px, 9vw, 42px);
        --font-h2: clamp(28px, 8vw, 36px);
        --font-h3: 22px;
    }
}