/* ========================================
   CSS Variables - Brand Guidelines
   ======================================== */

:root {
  /* ========================================
     Primary Colors
     ======================================== */
  --color-primary: #1B3A5C;
  --color-primary-light: #2A5A8C;
  --color-primary-dark: #0F2440;

  /* ========================================
     Accent Colors
     ======================================== */
  --color-accent: #C4973B;
  --color-accent-light: #D4A94E;

  /* ========================================
     Neutral Colors
     ======================================== */
  --color-bg: #FFFFFF;
  --color-bg-alt: #F5F5F0;
  --color-bg-dark: #1A1A2E;
  --color-text: #333333;
  --color-text-light: #666666;
  --color-text-white: #FFFFFF;
  --color-border: #E0E0E0;

  /* ========================================
     Typography
     ======================================== */
  --font-sans: 'Noto Sans JP', sans-serif;
  --font-serif: 'Noto Serif JP', serif;

  /* ========================================
     Spacing
     ======================================== */
  --section-padding: 100px 0;
  --section-padding-mobile: 60px 0;
  --container-width: 1080px;
  --container-padding: 0 24px;
  --card-gap: 24px;
  --element-gap: 16px;

  /* ========================================
     Transitions
     ======================================== */
  --transition-base: 0.3s ease;

  /* ========================================
     Shadows
     ======================================== */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-header: 0 2px 8px rgba(0, 0, 0, 0.1);

  /* ========================================
     Border Radius
     ======================================== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}