/* ===========================
   CSS Custom Properties
   日本物流施設風 — 落ち着いたコーポレート × 和の上質感
   =========================== */

:root {
  /* ── Colors ── */
  /* ベース: 温かみのあるライトグレー × 深みのあるダーク */
  --bg-primary:    #F5F4F0;   /* 温かみのあるライトグレー（日本物流施設風） */
  --bg-secondary:  #EDEAE3;   /* セクション切り替え背景 */
  --bg-card:       #FAFAF8;   /* カード背景（ほぼ白） */
  --bg-dark:       #1E1E1C;   /* 深みを増したダークセクション */
  --bg-dark-alt:   #141413;   /* さらに深いダーク */
  --bg-dark-mid:   #252523;   /* ミッドダーク（カード等） */

  --text-primary:  #1A1916;   /* より深い黒でコントラスト強化 */
  --text-secondary:#5C5751;   /* WCAG AA準拠の中間グレー */
  --text-muted:    #8C857E;
  --text-light:    #F7F5F0;
  --text-light-secondary: #C0B8AC;

  /* アクセント: 金茶（深みを強調） */
  --accent:        #8B7355;
  --accent-hover:  #A08968;
  --accent-subtle: #C8B89A;
  --accent-faint:  #EDE4D6;

  /* CTA: 深い緑（予約ボタン） — コントラスト強化 */
  --cta:           #4E7363;
  --cta-hover:     #3D5F51;
  --cta-light:     #6D9485;

  /* ボーダー: よりクリアな区切り */
  --border:        #CCC6BB;
  --border-dark:   #3A3A38;
  --border-accent: #A89880;

  /* ── Typography ── */
  /* UI/UX Pro Max: Japanese Elegant — Noto Serif JP + Noto Sans JP */
  --font-mincho:   'Noto Serif JP', 'Shippori Mincho', 'Hiragino Mincho ProN', serif;
  --font-gothic:   'Noto Sans JP', 'Hiragino Sans', sans-serif;
  --font-latin:    'Cormorant Garamond', Georgia, serif;

  /* ── Font Sizes (mobile-first) ── */
  --fs-hero:       clamp(1.875rem, 6.5vw, 3.25rem); /* 30px → 52px */
  --fs-h2:         clamp(1.5rem, 4.5vw, 2.5rem);    /* 24px → 40px */
  --fs-h3:         clamp(1.125rem, 2.5vw, 1.625rem); /* 18px → 26px */
  --fs-body:       clamp(1rem, 1.2vw, 1.0625rem);    /* 16px → 17px */
  --fs-small:      clamp(0.8125rem, 1vw, 0.875rem);  /* 13px → 14px */
  --fs-label:      0.6875rem; /* 11px — セクションラベル英語 */

  /* ── Line Heights ── */
  --lh-heading:    1.55;
  --lh-body:       2.0;      /* 読みやすさを強化 */
  --lh-relaxed:    2.15;

  /* ── Spacing ── */
  --space-xs:      0.5rem;    /* 8px */
  --space-sm:      1rem;      /* 16px */
  --space-md:      1.5rem;    /* 24px */
  --space-lg:      2.5rem;    /* 40px */
  --space-xl:      4rem;      /* 64px */
  --space-2xl:     6rem;      /* 96px */
  --space-3xl:     8rem;      /* 128px */

  --section-pad:   clamp(4rem, 10vw, 7.5rem);

  /* ── Layout ── */
  --container-max: 1200px;
  --text-max:      640px;
  --nav-height:    64px;
  --mobile-cta-height: 64px;

  /* ── Transitions ── */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast: 0.2s;
  --duration-base: 0.4s;
  --duration-slow: 0.8s;

  /* ── Shadows (UI/UX Pro Max: Trust & Authority — 精緻な多層シャドウ) ── */
  --shadow-sm:     0 1px 3px rgba(26, 25, 22, 0.05), 0 2px 8px rgba(26, 25, 22, 0.04);
  --shadow-md:     0 4px 12px rgba(26, 25, 22, 0.08), 0 8px 32px rgba(26, 25, 22, 0.05);
  --shadow-lg:     0 12px 40px rgba(26, 25, 22, 0.12), 0 24px 56px rgba(26, 25, 22, 0.07);
  --shadow-cta:    0 4px 20px rgba(78, 115, 99, 0.30), 0 2px 8px rgba(78, 115, 99, 0.18);
  --shadow-accent: 0 4px 16px rgba(139, 115, 85, 0.18);
  --shadow-card:   0 2px 8px rgba(26, 25, 22, 0.06), 0 1px 3px rgba(26, 25, 22, 0.04);

  /* ── Border Radius ── */
  --radius-sm:     4px;    /* 日本物流施設風：適度な丸み */
  --radius-md:     8px;
  --radius-lg:     12px;
  --radius-xl:     20px;
  --radius-card:   12px;   /* カード専用 */
}