/* ========================================
   CSS VARIABLES (Design Tokens)
   ======================================== */

:root {
    /* Colors - Primary */
    --color-primary: #376439;
    --color-primary-dark: #42633e;
    --color-primary-light: #9bd7ed;
    
    /* Colors - Accent */
    --color-accent: #f3a344;
    --color-accent-hover: #e09030;
    
    /* Colors - Neutral */
    --color-white: #ffffff;
    --color-gray-50: #f9f9f9;
    --color-gray-100: #f5f5f5;
    --color-gray-200: #e2e2e2;
    --color-gray-300: #e0e0e0;
    --color-gray-400: #d9d9d9;
    --color-gray-500: #c4c4c4;
    --color-gray-600: #707070;
    --color-gray-700: #555555;
    --color-black: #000000;
    --color-text-muted: rgba(0, 0, 0, 0.58);
    --color-border: #e2e2e2;
    
    /* Typography */
    --font-primary: 'Noto Sans JP', 'Noto Sans', sans-serif;
    --font-secondary: 'Zen Kaku Gothic Antique', sans-serif;
    --font-accent: 'Inter', sans-serif;
    
    --font-size-xs: 12px;     /* 12px */
    --font-size-sm: 14px;    /* 14px */
    --font-size-base: 16px;      /* 16px */
    --font-size-lg: 20px;     /* 20px */
    --font-size-xl: 24px;      /* 24px */
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.875; /* 30px / 16px */
    
    /* Spacing */
    --space-xs: 4px;   /* 4px */
    --space-sm: 8px;    /* 8px */
    --space-md: 16px;      /* 16px */
    --space-lg: 24px;    /* 24px */
    --space-xl: 32px;      /* 32px */
    --space-2xl: 48px;     /* 48px */
    --space-3xl: 64px;     /* 64px */
    
    /* Border Radius */
    --radius-sm: 5px;  /* 5px */
    --radius-md: 10px;   /* 10px */
    --radius-lg: 20px;  /* 19px */
    --radius-full: 25px; /* 25px */
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    
    /* Layout */
    --container-max: 1600px; /* 1600px */
    --container-padding: 16px;
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
}

/* ========================================
   RESPONSIVE BREAKPOINTS (via media queries)
   - sm: 640px
   - md: 768px  
   - lg: 1024px
   - xl: 1280px
   - 2xl: 1536px
   ======================================== */