/**
 * CSS Variables
 * 
 * テーマ全体で使用するCSS変数を定義
 * 
 * @package KICKOFF_WEB_Theme
 */

/* ============================================
   CSS変数（カラーパレット）
   ============================================ */
:root {
    /* カラー */
    --color-primary: #1a365d;        /* アクセントカラー（ネイビー） */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-text: #333333;
    --color-text-light: #666666;
    
    /* フォント種類 */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* フォントサイズ */
    /* 本文系：スマホでも16pxを維持（これ以下は可読性が落ちるため） */
    --font-size-base: 16px; 
    --font-size-lg: 20px;

    /* 中見出し：少しだけ可変させる */
    --font-size-xl: clamp(20px, 4vw, 24px);
    --font-size-2xl: clamp(24px, 6vw, 32px);

    /* 大見出し：現在の設定を維持 */
    --font-size-3xl: clamp(40px, 8vw, 48px);

    /* 超巨大見出し：PCでは迫力、スマホでは3xl並みに抑える */
    --font-size-4xl: clamp(44px, 10vw, 64px);
    
    /* スペーシング */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --spacing-2xl: 64px;
    --spacing-3xl: 96px;
    
    /* ブレークポイント */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    
    /* その他 */
    --border-radius: 8px;
    --transition-base: 0.3s ease;
}