/* CHANGED: MIRI NAIL brand token system replacing MAY skincare colors. */
:root {
  /* ============================================
   * COLOR SYSTEM
   * ブランドの世界観を支える配色設計
   * ============================================ */
  
  /* ベース背景：透明感と夏を表現 */
  --color-bg-primary: #FAF6F0;       /* アイボリーホワイト（ベース） */
  --color-bg-secondary: #F0F5F7;     /* 淡スカイブルー（海の透明感） */
  --color-bg-tertiary: #F5E8E4;      /* ペールピンク（女性らしさ） */
  --color-bg-warm: #FFF5EC;          /* ウォームベージュ（夕日） */
  
  /* テキスト：上品さと可読性の両立 */
  --color-text-primary: #3D2817;     /* 濃ブラウン（メイン） */
  --color-text-secondary: #6B5A4A;   /* ミディアムブラウン（サブ） */
  --color-text-muted: #9B8E85;       /* ミュートブラウン（補助） */
  --color-text-inverse: #FFFFFF;     /* 反転（CTAボタン文字） */
  
  /* アクセントカラー：役割別に明確に分離 */
  --color-accent-rose: #C97B89;      /* くすみローズ（CTA・行動喚起） */
  --color-accent-rose-hover: #B86A78;/* CTAホバー */
  --color-accent-rose-light: #E8C4CB;/* くすみローズ薄（背景アクセント） */
  --color-accent-turquoise: #4A9DAC; /* ターコイズ（夏・海・キーワード強調） */
  --color-accent-sage: #8DB89D;      /* セージグリーン（バッジ・自然） */
  --color-accent-gold: #C9A961;      /* ゴールド（高級感装飾） */
  
  /* 商品4カラー（ネイルチップ） */
  --color-product-blue: #A8C5D8;
  --color-product-green: #B5CDB0;
  --color-product-orange: #E8B088;
  --color-product-pink: #E0B5BD;
  
  /* 商品4カラーの淡背景版（セクション背景用） */
  --color-product-blue-bg: #EAF1F6;
  --color-product-green-bg: #ECF2EB;
  --color-product-orange-bg: #FBF1E8;
  --color-product-pink-bg: #F8EEF0;
  
  /* ============================================
   * TYPOGRAPHY
   * 縦書き×横書き×スクリプト体のリズム
   * ============================================ */
  
  --font-serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-script: "Pinyon Script", cursive;
  --font-display: "Cormorant Garamond", "Shippori Mincho", serif;
  
  /* フォントサイズ（流動的） */
  --fs-xs: clamp(0.75rem, 1.5vw, 0.875rem);
  --fs-sm: clamp(0.875rem, 2vw, 1rem);
  --fs-base: clamp(1rem, 2.5vw, 1.125rem);
  --fs-lg: clamp(1.25rem, 3vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 4vw, 2rem);
  --fs-2xl: clamp(2rem, 6vw, 3rem);
  --fs-3xl: clamp(2.5rem, 8vw, 4rem);
  
  /* 行間 */
  --lh-tight: 1.3;
  --lh-base: 1.7;
  --lh-loose: 2.0;
  
  /* 文字間 */
  --ls-tight: -0.02em;
  --ls-base: 0.05em;
  --ls-wide: 0.15em;
  --ls-vertical: 0.2em;  /* 縦書き用 */
  
  /* ============================================
   * SPACING
   * ============================================ */
  
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 80px;
  --space-2xl: 120px;
  --space-3xl: 160px;
  
  /* ============================================
   * EFFECTS
   * ============================================ */
  
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 9999px;
  
  --shadow-sm: 0 2px 8px rgba(61, 40, 23, 0.06);
  --shadow-md: 0 4px 16px rgba(61, 40, 23, 0.10);
  --shadow-lg: 0 8px 32px rgba(61, 40, 23, 0.12);
  --shadow-cta: 0 4px 20px rgba(201, 123, 137, 0.35);
  --shadow-product: 0 12px 40px rgba(74, 157, 172, 0.15);
  
  /* ============================================
   * LAYOUT
   * ============================================ */
  
  --max-content: 600px;     /* スマホファースト・LPの最適幅 */
  --max-wide: 1200px;       /* PC表示時の最大幅 */
  
  /* ============================================
   * ANIMATION
   * ============================================ */
  
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 0.2s;
  --duration-base: 0.4s;
  --duration-slow: 0.8s;
}

/* prefers-reduced-motion 対応 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01s;
    --duration-base: 0.01s;
    --duration-slow: 0.01s;
  }
}