/* =============================================================
   design-tokens.css — 黄金比ベースのデザイントークンシステム
   =============================================================
   LiftKit の哲学「黄金比でUIの調和を実現する」を、
   フレームワークに依存せず自前のCSS変数として導入します。

   ■ 黄金比 (φ) = 1.618
   ■ ベースユニット = 4px
   ■ すべてのスペーシング・タイポグラフィ・角丸は φ 倍で拡大

   既存スタイルとの互換性を維持するため、新しい --lk-* 変数として
   定義しています。既存の --bg, --acc 等はそのまま残ります。

   使い方例:
     padding: var(--sp-4);          → 16px (sp = spacing)
     font-size: var(--text-base);   → 16px
     border-radius: var(--radius-md); → 12px
     gap: var(--sp-3);              → 10px
   ============================================================= */

:root {

    /* ===========================================================
     1. 黄金比スケール変数
     =========================================================== */
    --phi: 1.618;

    /* ===========================================================
     2. スペーシングスケール (sp-*)
     ベース 4px を φ 倍で順にスケール
     =========================================================== */
    --sp-0: 0px;
    --sp-px: 1px;
    --sp-0_5: 2px;
    /* 4 / φ  ≈ 2.47 → 2px */
    --sp-1: 4px;
    /* base */
    --sp-1_5: 6px;
    /* 4 × φ^0.5 ≈ 5.1 → 6px (中間ステップ) */
    --sp-2: 7px;
    /* 4 × φ   ≈ 6.47 → 7px */
    --sp-2_5: 8px;
    /* 調整: よく使われる 8px */
    --sp-3: 10px;
    /* 4 × φ^1.5 ≈ 10.5 → 10px */
    --sp-4: 16px;
    /* 4 × φ²  ≈ 10.5 → 実用調整で 16px (4の倍数) */
    --sp-5: 20px;
    /* 16 × φ^0.5 ≈ 20.3 → 20px */
    --sp-6: 24px;
    /* 実用値: 24px (カード内パディング) */
    --sp-7: 28px;
    /* 24 × φ^0.3 ≈ 28 */
    --sp-8: 32px;
    /* 実用値: 32px */
    --sp-10: 40px;
    /* 32 × φ^0.5 ≈ 40 */
    --sp-12: 48px;
    /* 40 × φ^0.4 ≈ 48 */
    --sp-16: 64px;
    /* 48 × φ^0.6 ≈ 64 */
    --sp-20: 80px;
    /* 64 × φ^0.5 ≈ 80 */
    --sp-24: 96px;
    /* 80 × φ^0.4 ≈ 96 */

    /* ===========================================================
     3. タイポグラフィスケール (text-*)
     ベース 16px をフォントの黄金比 (φ^0.5 ≒ 1.272) でスケール
     φ^0.5 はフォントに適した穏やかな比率
     =========================================================== */
    --text-2xs: 9px;
    /* ≈ 16 / φ^1.5 = 9.6 */
    --text-xs: 11px;
    /* ≈ 16 / φ   = 9.9 → 実用調整 11px */
    --text-sm: 13px;
    /* ≈ 16 / φ^0.5 = 12.6 → 13px */
    --text-base: 16px;
    /* ベース */
    --text-lg: 18px;
    /* ≈ 16 × φ^0.25 ≈ 17.6 → 18px */
    --text-xl: 20px;
    /* ≈ 16 × φ^0.5  ≈ 20.3 → 20px */
    --text-2xl: 24px;
    /* ≈ 16 × φ^0.75 ≈ 24   */
    --text-3xl: 28px;
    /* ≈ 16 × φ     = 25.9 → 実用調整 28px */
    --text-4xl: 32px;
    /* ≈ 16 × φ^1.25 ≈ 32.7 → 32px */

    /* 行の高さ (φ 由来の 1.618 を活用) */
    --leading-tight: 1.25;
    --leading-snug: 1.382;
    /* 1/φ + 0.75 ≒ 1.382 (φの逆数ベース) */
    --leading-normal: 1.5;
    --leading-relaxed: 1.618;
    /* φ そのもの = 黄金比の行間 */
    --leading-loose: 1.8;

    /* フォントウェイト */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    /* レタースペーシング */
    --tracking-tight: -0.025em;
    --tracking-normal: 0em;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;

    /* ===========================================================
     4. ボーダー半径スケール (radius-*)
     小さな値は控えめ、大きくなるにつれ φ の影響が強まる
     =========================================================== */
    --radius-none: 0px;
    --radius-xs: 4px;
    /* sp-1 */
    --radius-sm: 6px;
    /* sp-1.5 */
    --radius-md: 8px;
    /* sp-2.5 — ボタンのデフォルト */
    --radius-lg: 12px;
    /* sp-3 + 2 — カードのデフォルト */
    --radius-xl: 16px;
    /* sp-4 — モーダルのデフォルト */
    --radius-2xl: 20px;
    /* sp-5 */
    --radius-full: 9999px;
    /* 完全な丸 */

    /* ===========================================================
     5. シャドウスケール (shadow-*)
     φ ベースの blur / spread でレイヤー感を演出
     =========================================================== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.15);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.18);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.22);
    --shadow-lg: 0 7px 20px rgba(0, 0, 0, 0.28);
    --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.35);
    --shadow-2xl: 0 20px 52px rgba(0, 0, 0, 0.42);

    /* アクセントカラーのシャドウ (ダークテーマ用) */
    --shadow-acc-sm: 0 2px 8px rgba(34, 211, 238, 0.2);
    --shadow-acc-md: 0 4px 16px rgba(34, 211, 238, 0.25);
    --shadow-acc-lg: 0 6px 20px rgba(34, 211, 238, 0.3);

    /* ===========================================================
     6. トランジション (transition-*)
     φ ベースの duration で統一感 (基準: 200ms)
     =========================================================== */
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    --duration-fast: 120ms;
    /* 200 / φ ≈ 124 → 120ms */
    --duration-normal: 200ms;
    /* ベース */
    --duration-slow: 320ms;
    /* 200 × φ ≈ 324 → 320ms */
    --duration-slower: 500ms;
    /* 200 × φ^1.5 ≈ 516 → 500ms */

    --transition-fast: all var(--duration-fast) var(--ease-default);
    --transition-normal: all var(--duration-normal) var(--ease-default);
    --transition-slow: all var(--duration-slow) var(--ease-default);
    --transition-bounce: all var(--duration-slow) var(--ease-bounce);

    /* ===========================================================
     7. ブレイクポイント (参照用 — CSS変数ではメディアクエリに使えない)
     =========================================================== */
    /* 
     --bp-sm: 480px;    モバイル
     --bp-md: 768px;    タブレット
     --bp-lg: 980px;    デスクトップ (現在の container)
     --bp-xl: 1200px;   大画面 (dashboard)
  */

    /* ===========================================================
     8. コンテナ幅
     =========================================================== */
    --container-sm: 640px;
    --container-md: 980px;
    /* 現在のデフォルト */
    --container-lg: 1200px;
    /* ダッシュボード用 */

    /* ===========================================================
     9. ボーダー
     =========================================================== */
    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 3px;

    /* ダークテーマ用 (デフォルト) */
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-default: rgba(255, 255, 255, 0.12);
    --border-strong: rgba(255, 255, 255, 0.2);
    --border-accent: var(--acc);

    /* ===========================================================
     10. Z-index スケール
     =========================================================== */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-fixed: 1000;
    /* fixed-nav */
    --z-overlay: 5000;
    --z-modal: 9998;
    --z-toast: 10000;

    /* ===========================================================
     11. グラス / マテリアル効果
     =========================================================== */
    --glass-bg: rgba(255, 255, 255, 0.04);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-blur: blur(10px);

    /* ===========================================================
     12. 透明度スケール (opacity-*)
     =========================================================== */
    --opacity-disabled: 0.5;
    --opacity-muted: 0.6;
    --opacity-soft: 0.8;
    --opacity-full: 1;

    /* ===========================================================
     13. アイコンサイズ (黄金比スケール)
     =========================================================== */
    --icon-xs: 14px;
    --icon-sm: 18px;
    /* 14 × φ^0.4 ≈ 17.5 → 18px */
    --icon-md: 22px;
    /* 18 × φ^0.35 ≈ 22 */
    --icon-lg: 28px;
    /* 22 × φ^0.4 ≈ 27.5 → 28px */
    --icon-xl: 36px;
    /* 28 × φ^0.4 ≈ 35 → 36px */
    --icon-2xl: 48px;
    /* 36 × φ^0.5 ≈ 45.7 → 48px */
}

/* ライトテーマのボーダーオーバーライド */
[data-theme="light"] {
    --border-subtle: rgba(0, 0, 0, 0.08);
    --border-default: rgba(0, 0, 0, 0.12);
    --border-strong: rgba(0, 0, 0, 0.2);

    /* ライトテーマ用シャドウ (軽め) */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.18);
    --shadow-2xl: 0 20px 52px rgba(0, 0, 0, 0.22);

    /* ライトテーマ用アクセントシャドウ */
    --shadow-acc-sm: 0 2px 8px rgba(255, 136, 0, 0.2);
    --shadow-acc-md: 0 4px 16px rgba(255, 136, 0, 0.25);
    --shadow-acc-lg: 0 6px 20px rgba(255, 136, 0, 0.35);

    /* グラス効果 */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(0, 0, 0, 0.08);
}

/* ===========================================================
   レスポンシブ調整
   タブレット以下ではスペーシングを控えめにする
   =========================================================== */
@media (max-width: 768px) {
    :root {
        /* モバイルではスペーシングを 10-15% 圧縮 */
        --sp-6: 20px;
        /* 24 → 20 */
        --sp-8: 28px;
        /* 32 → 28 */
        --sp-10: 36px;
        /* 40 → 36 */

        /* フォントサイズも微調整 */
        --text-3xl: 24px;
        /* 28 → 24 */
        --text-4xl: 28px;
        /* 32 → 28 */
    }
}

@media (max-width: 480px) {
    :root {
        /* 小型スマートフォン */
        --sp-6: 18px;
        --sp-8: 24px;
        --sp-10: 32px;

        --text-2xl: 20px;
        --text-3xl: 22px;
        --text-4xl: 24px;
    }
}