/* ============================================
   CSS Variables - Creatrip Theme
   테마 JSON 기반 CSS 커스텀 속성
   ============================================ */

:root {
   /* ===========================================
     Colors - Primary (Vibrant Coral Red)
     =========================================== */
   --color-primary-main: #FF6B6B;
   --color-primary-light: #FF8E8E;
   --color-primary-dark: #E55555;
   --color-primary-contrast: #FFFFFF;

   /* Colors - Secondary (Vibrant Purple) */
   --color-secondary-main: #6C5CE7;
   --color-secondary-light: #A29BFE;
   --color-secondary-dark: #5849BE;
   --color-secondary-contrast: #FFFFFF;

   /* Colors - Background */
   --color-bg-default: #FFFFFF;
   --color-bg-paper: #F8F9FA;
   --color-bg-gray: #F5F5F5;
   --color-bg-dark: #1A1A1A;

   /* Colors - Text */
   --color-text-primary: #1A1A1A;
   --color-text-secondary: #666666;
   --color-text-disabled: #9E9E9E;
   --color-text-hint: #BDBDBD;
   --color-text-white: #FFFFFF;

   /* Colors - Accent */
   --color-accent-coral: #FF6B6B;
   --color-accent-yellow: #FFD93D;
   --color-accent-purple: #6C5CE7;
   --color-accent-blue: #4ECDC4;
   --color-accent-pink: #FD79A8;

   /* Colors - Status */
   --color-status-success: #00C853;
   --color-status-warning: #FFB300;
   --color-status-error: #FF5252;
   --color-status-info: #2196F3;

   /* Colors - Border */
   --color-border-light: #E0E0E0;
   --color-border-main: #CCCCCC;
   --color-border-dark: #999999;

   /* ===========================================
     Typography
     =========================================== */
   --font-family-primary: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --font-family-english: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
   --font-family-heading: 'Pretendard', 'Noto Sans KR', sans-serif;

   /* Font Sizes */
   --font-size-xs: 12px;
   --font-size-sm: 14px;
   --font-size-base: 16px;
   --font-size-lg: 18px;
   --font-size-xl: 20px;
   --font-size-2xl: 24px;
   --font-size-3xl: 30px;
   --font-size-4xl: 36px;
   --font-size-5xl: 48px;
   --font-size-6xl: 64px;

   /* Font Weights */
   --font-weight-light: 300;
   --font-weight-regular: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
   --font-weight-extrabold: 800;

   /* Line Heights */
   --line-height-tight: 1.25;
   --line-height-normal: 1.5;
   --line-height-relaxed: 1.75;

   /* ===========================================
     Spacing
     =========================================== */
   --spacing-unit: 4px;
   --spacing-xs: 4px;
   --spacing-sm: 8px;
   --spacing-md: 16px;
   --spacing-lg: 24px;
   --spacing-xl: 32px;
   --spacing-2xl: 48px;
   --spacing-3xl: 64px;
   --spacing-4xl: 96px;

   /* ===========================================
     Border Radius
     =========================================== */
   --radius-none: 0;
   --radius-sm: 4px;
   --radius-md: 8px;
   --radius-lg: 12px;
   --radius-xl: 16px;
   --radius-2xl: 24px;
   --radius-full: 9999px;

   /* ===========================================
     Shadows
     =========================================== */
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
   --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
   --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
   --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
   --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
   --shadow-button: 0 4px 12px rgba(255, 107, 107, 0.35);
   --shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.12);

   /* ===========================================
     Transitions
     =========================================== */
   --transition-fast: 150ms ease-in-out;
   --transition-normal: 250ms ease-in-out;
   --transition-slow: 350ms ease-in-out;
   --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

   /* ===========================================
     Gradients
     =========================================== */
   --gradient-primary: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 100%);
   --gradient-secondary: linear-gradient(135deg, #6C5CE7 0%, #A29BFE 100%);
   --gradient-sunset: linear-gradient(135deg, #FF6B6B 0%, #FFD93D 100%);
   --gradient-ocean: linear-gradient(135deg, #4ECDC4 0%, #00BDAD 100%);
   --gradient-purple: linear-gradient(135deg, #6C5CE7 0%, #A29BFE 100%);
   --gradient-dark: linear-gradient(135deg, #1A1A1A 0%, #333333 100%);

   /* ===========================================
     Layout
     =========================================== */
   --container-max-width: 1200px;
   --container-padding: 16px;
   --grid-gap: 24px;
   --section-spacing: 80px;

   /* ===========================================
     Component Specific
     =========================================== */
   /* Header */
   --header-height: 64px;
   --header-bg: #FFFFFF;
   --header-border: 1px solid #E0E0E0;

   /* Icons */
   --icon-size-xs: 16px;
   --icon-size-sm: 20px;
   --icon-size-md: 24px;
   --icon-size-lg: 32px;
   --icon-size-xl: 48px;
}

/* ===========================================
   Breakpoint Mixins (using CSS custom properties)
   =========================================== */
@media (max-width: 576px) {
   :root {
      --font-size-4xl: 28px;
      --font-size-5xl: 36px;
      --font-size-6xl: 48px;
      --container-padding: 16px;
      --grid-gap: 16px;
      --section-spacing: 48px;
   }
}

@media (max-width: 768px) {
   :root {
      --font-size-3xl: 24px;
      --font-size-4xl: 30px;
   }
}