/**
 * BELAUN - CSS Variables
 * トップページ専用 カラー・フォント・レイアウト定義
 */

:root {
  /* ===== Colors ===== */
  --belaun-primary: #002D74;      /* Main Navy */
  --belaun-beige: #F7F1E5;        /* Background Beige */
  --belaun-white: #FFFFFF;        /* Pure White */
  --belaun-accent: #C5A059;       /* Gold Accent */
  
  /* Color Variations */
  --belaun-primary-rgb: 0, 45, 116;
  --belaun-beige-rgb: 247, 241, 229;
  
  /* ===== Typography ===== */
  --belaun-font-sans: 'Zen Kaku Gothic Antique', sans-serif;
  --belaun-font-meddon: 'Meddon', cursive;
  
  /* Font Sizes - Fluid Typography */
  --belaun-text-xs: clamp(10px, 0.8vw, 14px);
  --belaun-text-sm: clamp(12px, 1vw, 16px);
  --belaun-text-base: clamp(14px, 1.2vw, 18px);
  --belaun-text-lg: clamp(16px, 1.4vw, 20px);
  --belaun-text-xl: clamp(18px, 1.6vw, 24px);
  --belaun-text-2xl: clamp(20px, 2vw, 32px);
  --belaun-text-3xl: clamp(24px, 2.5vw, 40px);
  
  /* ===== Layout ===== */
  --belaun-sidebar-width: 20vw;
  --belaun-header-height: 80px;
  --belaun-content-width: calc(100vw - var(--belaun-sidebar-width));
  
  /* ===== Breakpoints ===== */
  --belaun-bp-mobile: 767px;
  --belaun-bp-tablet: 768px;
  --belaun-bp-desktop: 1024px;
  
  /* ===== Spacing ===== */
  --belaun-section-padding-y: clamp(48px, 8vw, 80px);
  --belaun-section-padding-x: clamp(16px, 4vw, 64px);
  
  /* ===== Transitions ===== */
  --belaun-transition-fast: 0.3s ease;
  --belaun-transition-normal: 0.5s ease;
  --belaun-transition-slow: 0.7s cubic-bezier(0.65, 0, 0.35, 1);
  --belaun-transition-image: 1.5s ease-out;
  
  /* ===== Shadows ===== */
  --belaun-shadow-sm: 0 2px 4px rgba(var(--belaun-primary-rgb), 0.1);
  --belaun-shadow-md: 0 4px 12px rgba(var(--belaun-primary-rgb), 0.15);
  --belaun-shadow-lg: 0 8px 24px rgba(var(--belaun-primary-rgb), 0.2);
  --belaun-shadow-xl: 0 16px 48px rgba(var(--belaun-primary-rgb), 0.25);
  
  /* ===== Z-Index ===== */
  --belaun-z-content: 1;
  --belaun-z-sidebar: 40;
  --belaun-z-menu-overlay: 40;
  --belaun-z-reserve-btn: 50;
}

/* Mobile Overrides */
@media (max-width: 767px) {
  :root {
    --belaun-sidebar-width: 0;
    --belaun-content-width: 100vw;
  }
}