/* ==========================================================================
   CSS変数定義 — Mansion Catalog (SP専用 / iPhone 17 Pro 402px基準)
   基準: 1rem = 14px
   ========================================================================== */

:root {
  /* ============================================
     フォントファミリー
     ============================================ */
  --font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --ff-en: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;


  /* ============================================
     フォントサイズ (clamp() で SP サイズ差に対応)
     1rem = 14px 基準
     ============================================ */
  --font-xs:   clamp(0.607rem, 1.8vw, 0.714rem);     /* ~10px */
  --font-sm:   clamp(0.714rem, 2.1vw, 0.857rem);     /* ~12px */
  --font-base: clamp(0.857rem, 2.5vw, 1rem);         /* ~14px */
  --font-md:   clamp(1rem,     2.9vw, 1.143rem);     /* ~16px */
  --font-lg:   clamp(1.143rem, 3.3vw, 1.286rem);     /* ~18px */
  --font-xl:   clamp(1.286rem, 3.8vw, 1.429rem);     /* ~20px */
  --font-2xl:  clamp(1.429rem, 4.3vw, 1.571rem);     /* ~22px */
  --font-3xl:  clamp(1.571rem, 4.7vw, 1.714rem);     /* ~24px */
  --font-4xl:  clamp(1.714rem, 5.2vw, 2rem);         /* ~28px */
  --font-5xl:  clamp(2rem,     6vw,   2.286rem);     /* ~32px */


  /* ============================================
     ライン高
     ============================================ */
  --line-height-none:    1;
  --line-height-tight:   1.1;
  --line-height-snug:    1.2;
  --line-height-normal:  1.4;
  --line-height-relaxed: 1.5;
  --line-height-loose:   1.8;


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


  /* ============================================
     カラー (色名ベース / 1色 = 1変数)
     ============================================ */
  --color-white:      #F1F1F1;
  --color-white-rgb:  255, 255, 255;
  --color-black:      #121212;
  --color-ink:        #383838;
  --color-ink-rgb:    56, 56, 56;
  --color-navy:       #182b4b;
  --color-navy-rgb:   24, 43, 75;
  --color-blue:       #004295;
  --color-blue-rgb:   0, 66, 149;
  --color-blue-deep:  #003280;
  --color-sky:        #eaf6ff;
  --color-pink:       #e1306c;
  --color-pink-rgb:   225, 48, 108;

  /* アクセント色 (ニュートラルは ink)。ページ側で :root を上書きしてブランド色に切替 */
  --color-accent:     var(--color-ink);
  --color-accent-rgb: var(--color-ink-rgb);
  --color-orange:     #fe612c;
  --color-orange-rgb: 254, 97, 44;
  --color-amber:      #ffa12c;
  --color-yellow:     #ffff00;
  --color-yellow-rgb: 255, 255, 0;
  --color-gray-100:   #f4f4f4;
  --color-gray-200:   #e2e6ea;
  --color-gray-300:   #ececec;


  /* ============================================
     グラデーション
     ============================================ */
  --gradient-orange: linear-gradient(to right, var(--color-orange), var(--color-amber));
  --gradient-pink:   linear-gradient(to right, var(--color-pink), #ff6b9a);


  /* ============================================
     スペーシング (rem 換算, 1rem = 14px)
     ============================================ */
  --space-3xs: 0.143rem;   /*  2px */
  --space-2xs: 0.286rem;   /*  4px */
  --space-xs:  0.429rem;   /*  6px */
  --space-sm:  0.571rem;   /*  8px */
  --space-md:  0.857rem;   /* 12px */
  --space-lg:  1.143rem;   /* 16px */
  --space-xl:  1.429rem;   /* 20px */
  --space-2xl: 1.714rem;   /* 24px */
  --space-3xl: 2.286rem;   /* 32px */
  --space-4xl: 2.857rem;   /* 40px */
  --space-5xl: 3.429rem;   /* 48px */
  --space-6xl: 4.571rem;   /* 64px */
  --space-7xl: 5.714rem;   /* 80px */

  --mobile-gutter: 1.143rem;   /* 16px (root 14px基準) */


  /* ============================================
     ボーダー半径
     ============================================ */
  --border-radius-sm:   0.286rem;   /*  4px */
  --border-radius-md:   0.571rem;   /*  8px */
  --border-radius-lg:   0.857rem;   /* 12px */
  --border-radius-xl:   1.143rem;   /* 16px */
  --border-radius-2xl:  1.714rem;   /* 24px */
  --border-radius-full: 100vw;


  /* ============================================
     シャドウ
     ============================================ */
  --shadow-sm:   0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-md:   0 4px 12px rgba(var(--color-blue-rgb), 0.15);
  --shadow-lg:   0 7px 32px rgba(var(--color-blue-rgb), 0.18);
  --shadow-card: 0 6px 20px rgba(var(--color-navy-rgb), 0.1);


  /* ============================================
     トランジション
     ============================================ */
  --duration-fast:   0.2s;
  --duration-base:   0.3s;
  --duration-slow:   0.6s;

  --easeOutCubic:   cubic-bezier(0.33, 1, 0.68, 1);
  --easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);

  --transition-base: var(--duration-base) var(--easeOutCubic);
  --transition-fast: var(--duration-fast) var(--easeOutCubic);


  /* ============================================
     コンテナ
     ============================================ */
  --container-max-width: 402px;


  /* ============================================
     z-index 階層
     ============================================ */
  --z-base:       0;
  --z-above:      1;
  --z-content:    2;
  --z-decoration: 3;
  --z-slider:     4;
  --z-sticky:     10;
  --z-fixed:      20;
  --z-header:     100;
  --z-modal:      1000;
}