/* CSS Custom Properties */
:root {
     /* Primary brand */
    --color-primary: #00A4AC;        /* メイン：ブランド青緑 */
    --color-primary-dark: #00828A;   /* 濃い青緑 */
    --color-primary-light: #D1FAE5;  /* 淡いミント（背景やハイライト用） */

    /* Secondary (nature & wood) */
    --color-secondary-green: #008249;   /* サブ：フォレストグリーン */
    --color-secondary-brown: #734E30;   /* サブ：ウッドブラウン */
    --color-secondary-light: #EADAC8;   /* ウッドに合うベージュ背景 */

    /* Accent (暖色で優しい強調) */
    --color-accent: #E07A5F;         /* コーラルオレンジ（CTAに使える） */
    --color-accent-alt: #F2CC8F;     /* サンドベージュ（背景強調用） */

    /* Text */
    --color-text: #333333;           /* メインテキスト */
    --color-text-light: #666666;     /* サブテキスト */
    --color-text-white: #FFFFFF;     /* 白文字 */

    /* Background */
    --color-bg: #FFFFFF;             /* 基本背景（清潔感） */
    --color-bg-light: #F3F4F6;       /* セクション分割用ライトグレー */
    --color-bg-alt: #FAF4EF;         /* 温かみのあるベージュ背景 */
    --color-bg-dark: #2C2C2C;        /* ダーク背景（フッターなど） */

    /* Border */
    --color-border: #E5E7EB;         /* 標準ボーダー */
    --color-border-light: #F0F0F0;   /* 薄いボーダー */

    /* Status */
    --color-success: #2E7D32;        /* 成功：落ち着いた緑 */
    --color-error: #C62828;          /* エラー：落ち着いた赤 */
    --color-warning: #ED8936;        /* 警告：オレンジ寄り */
    
    /* Typography */
    --font-family-base: 'Noto Sans JP', sans-serif;
    --font-size-base: 1rem;
    --font-size-sm: 0.875rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    
    --line-height-tight: 1.2;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    --spacing-4xl: 6rem;
    --sp-1: 6px;
    --sp-2: 10px;
    --sp-3: 14px;
    --sp-4: 18px;
    --sp-5: 22px;
    --sp-6: 28px;
    --sp-7: 36px;

    
    /* Layout */
    --container-max-width: 1200px;
    --container-padding: 20px;
    
    --header-height: 80px;
    --header-height-mobile: 60px;
    
    /* Border radius */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --border-radius-full: 50px;
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.1);
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Z-index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* Dark mode variables (for future use) */
@media (prefers-color-scheme: dark) {
    :root {
        --color-text: #f8f9fa;
        --color-text-light: #adb5bd;
        --color-bg: #212529;
        --color-bg-light: #343a40;
        --color-border: #495057;
        --color-border-light: #6c757d;
    }
}