/*
Theme Name: LP Variables
Description: CSS変数定義（色、フォント、余白など）
Note: デザイン変更時はこのファイルを修正する
*/

:root {
    /* ===================================================================
   * カラーパレット
   * =================================================================== */

    /* ベースカラー */
    --color-black: #605358;
    --color-white: #FFFFFF;

    /* アミーカラー - レッド */
    --color-amiee-red: #F64058;

    /* アミーカラー - ピンク */
    --color-amiee-pink-lighter: #FFF5F5;
    --color-amiee-pink-light: #FFE5E5;
    --color-amiee-pink: #FFCDCD;
    --color-amiee-pink-dark: #FFB3B3;
    --color-amiee-pink-darker: #FF9999;

    /* アミーカラー - グリーン */
    --color-amiee-green-lighter: #F5FAF8;
    --color-amiee-green-light: #E8F5F0;
    --color-amiee-green: #B8E5CD;
    --color-amiee-green-dark: #8FD4B3;
    --color-amiee-green-darker: #66C399;

    /* アミーカラー - イエロー */
    --color-amiee-yellow-lighter: #FFFCF0;
    --color-amiee-yellow-light: #FFF9E5;
    --color-amiee-yellow: #FFF2CC;
    --color-amiee-yellow-dark: #FFE999;
    --color-amiee-yellow-darker: #e4c348;

    /* 商品カラー */
    --color-amiee-natural: #F5F0E8;
    --color-amiee-black: #1A1A1A;

    /* ラインカラー */
    --color-line-gray: #B5B3B4;
    --color-gray-light: #E8E8E8;

    /* ===================================================================
   * タイポグラフィ
   * =================================================================== */

    /* フォントファミリー */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif;
    --font-family-lora: "Lora", Georgia, serif;
    --font-family-line-seed: "LINE Seed JP", var(--font-family-base);
    --font-family-zen-maru: "Zen Maru Gothic", var(--font-family-base);

    /* フォントサイズ - レスポンシブ（clamp使用） */
    /* 最小サイズ（320px）→ 基準サイズ（375px）→ 最大サイズ（768px以上） */
    --font-size-xs: clamp(0.688rem, 0.65rem + 0.19vw, 0.75rem);
    /* 11px → 12px */
    --font-size-sm: clamp(0.813rem, 0.775rem + 0.19vw, 0.875rem);
    /* 13px → 14px */
    --font-size-base: clamp(0.938rem, 0.9rem + 0.19vw, 1rem);
    /* 15px → 16px */
    --font-size-md: clamp(1.063rem, 1.025rem + 0.19vw, 1.125rem);
    /* 17px → 18px */
    --font-size-lg: clamp(1.125rem, 1.05rem + 0.38vw, 1.25rem);
    /* 18px → 20px */
    --font-size-xl: clamp(1.313rem, 1.2rem + 0.56vw, 1.5rem);
    /* 21px → 24px */
    --font-size-2xl: clamp(1.625rem, 1.45rem + 0.88vw, 1.875rem);
    /* 26px → 30px */
    --font-size-3xl: clamp(1.938rem, 1.7rem + 1.19vw, 2.25rem);
    /* 31px → 36px */

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

    /* 行高 */
    --line-height-tighter: 1.2;
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-snug: 1.4;
    --line-height-relaxed: 1.6;
    --line-height-loose: 1.75;

    /* 字間 */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.05em;
    --letter-spacing-wider: 0.1em;

    /* ===================================================================
   * レイアウト・スペーシング（4の倍数システム）
   * =================================================================== */

    /* スペーシングスケール（基準: 4px） */
    --space-base: 4px;
    --space-xs: 4px;
    /* 4px */
    --space-sm: 8px;
    /* 8px */
    --space-md: 16px;
    /* 16px */
    --space-lg: 24px;
    /* 24px */
    --space-xl: 32px;
    /* 32px */
    --space-2xl: 40px;
    /* 40px */
    --space-3xl: 48px;
    /* 48px */
    --space-4xl: 56px;
    /* 56px */
    --space-5xl: 64px;
    /* 64px */
    --space-6xl: 80px;
    /* 80px */
    --space-7xl: 96px;
    /* 96px */

    /* コンテナ幅（iPhone 16 Pro基準） */
    --content-max-width: 440px;
    --container-width: 440px;
    --container-padding: var(--space-lg);

    /* ===================================================================
   * ボーダー・角丸
   * =================================================================== */

    /* ボーダー幅 */
    --border-width-thin: 1px;
    --border-width-base: 2px;
    --border-width-thick: 4px;

    /* 角丸 */
    --border-radius-sm: 4px;
    --border-radius-base: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --border-radius-xl: 24px;
    --border-radius-2xl: 32px;
    --border-radius-full: 9999px;

    /* ===================================================================
   * シャドウ
   * =================================================================== */

    /* 基本シャドウ */
    --shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.02), 0 6px 8px 0 rgba(0, 0, 0, 0.02), 0 12px 16px 0 rgba(0, 0, 0, 0.01);
    --shadow-base: 0 2px 4px 0 rgba(0, 0, 0, 0.05), 0 6px 8px 0 rgba(0, 0, 0, 0.04), 0 12px 16px 0 rgba(0, 0, 0, 0.03), 0 20px 24px 0 rgba(0, 0, 0, 0.02), 0 32px 40px 0 rgba(0, 0, 0, 0.01);
    --shadow-md: 0 4px 8px 0 rgba(0, 0, 0, 0.06), 0 8px 16px 0 rgba(0, 0, 0, 0.05), 0 16px 24px 0 rgba(0, 0, 0, 0.04), 0 24px 32px 0 rgba(0, 0, 0, 0.03), 0 40px 48px 0 rgba(0, 0, 0, 0.02);
    --shadow-lg: 0 8px 16px 0 rgba(0, 0, 0, 0.07), 0 16px 24px 0 rgba(0, 0, 0, 0.06), 0 24px 32px 0 rgba(0, 0, 0, 0.05), 0 32px 48px 0 rgba(0, 0, 0, 0.04), 0 48px 64px 0 rgba(0, 0, 0, 0.02);
    --shadow-xl: 0 16px 32px 0 rgba(0, 0, 0, 0.09), 0 24px 48px 0 rgba(0, 0, 0, 0.07), 0 32px 64px 0 rgba(0, 0, 0, 0.06), 0 48px 80px 0 rgba(0, 0, 0, 0.05), 0 64px 96px 0 rgba(0, 0, 0, 0.03);

    /* カラーシャドウ（ロングシャドー） */
    --shadow-red: 0 62px 17px 0 rgba(245, 64, 88, 0.00), 0 40px 16px 0 rgba(245, 64, 88, 0.03), 0 22px 13px 0 rgba(245, 64, 88, 0.10), 0 10px 10px 0 rgba(245, 64, 88, 0.17), 0 2px 5px 0 rgba(245, 64, 88, 0.20);
    --shadow-pink: 0 2px 4px 0 rgba(254, 173, 166, 0.10), 0 6px 8px 0 rgba(254, 173, 166, 0.09), 0 12px 16px 0 rgba(254, 173, 166, 0.07), 0 20px 24px 0 rgba(254, 173, 166, 0.05), 0 32px 40px 0 rgba(254, 173, 166, 0.03), 0 48px 60px 0 rgba(254, 173, 166, 0.01);
    --shadow-green: 0 2px 4px 0 rgba(184, 229, 205, 0.10), 0 6px 8px 0 rgba(184, 229, 205, 0.09), 0 12px 16px 0 rgba(184, 229, 205, 0.07), 0 20px 24px 0 rgba(184, 229, 205, 0.05), 0 32px 40px 0 rgba(184, 229, 205, 0.03), 0 48px 60px 0 rgba(184, 229, 205, 0.01);
    --shadow-yellow: 0 2px 4px 0 rgba(255, 242, 204, 0.10), 0 6px 8px 0 rgba(255, 242, 204, 0.09), 0 12px 16px 0 rgba(255, 242, 204, 0.07), 0 20px 24px 0 rgba(255, 242, 204, 0.05), 0 32px 40px 0 rgba(255, 242, 204, 0.03), 0 48px 60px 0 rgba(255, 242, 204, 0.01);

    /* ===================================================================
   * z-index
   * =================================================================== */

    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;

    /* ===================================================================
   * トランジション
   * =================================================================== */

    --transition-fast: 150ms;
    --transition-base: 300ms;
    --transition-slow: 500ms;
}