/* ============================================================
   CSS Custom Properties - 힐링머니 디자인 시스템
   ============================================================ */

:root {
    /* ─── Brand Colors ─── */
    --color-primary:        #295CB3;
    --color-primary-dark:   #002970;
    --color-primary-darker: #001436;
    --color-primary-light:  #4A7FD4;
    --color-primary-lighter:#7BA3E0;
    --color-primary-bg:     #EBF0F9;
    --color-primary-bg-alt: #F4F7FC;

    --color-accent:         #2683E0;
    --color-accent-light:   rgba(38, 131, 224, 0.12);
    --color-accent-yellow:  #FFC107;
    --color-accent-orange:  #FF8C00;

    /* ─── Gradient ─── */
    --gradient-primary:     linear-gradient(135deg, #295CB3 0%, #002970 100%);
    --gradient-cta:         linear-gradient(135deg, #2683E0 0%, #295CB3 50%, #002970 100%);
    --gradient-cta-hover:   linear-gradient(135deg, #3B95F0 0%, #3A6FC5 50%, #003A8C 100%);
    --gradient-hero:        linear-gradient(180deg, rgba(0,41,112,0.92) 0%, rgba(41,92,179,0.88) 100%);
    --gradient-card:        linear-gradient(180deg, #FFFFFF 0%, #F4F7FC 100%);

    /* ─── Neutral Colors ─── */
    --color-white:          #FFFFFF;
    --color-black:          #000000;
    --color-gray-50:        #F9FAFB;
    --color-gray-100:       #F3F4F6;
    --color-gray-200:       #E5E7EB;
    --color-gray-300:       #D1D5DB;
    --color-gray-400:       #9CA3AF;
    --color-gray-500:       #6B7280;
    --color-gray-600:       #4B5563;
    --color-gray-700:       #374151;
    --color-gray-800:       #1F2937;
    --color-gray-900:       #111827;

    /* ─── Text Colors ─── */
    --color-text:           #374151;
    --color-text-light:     #6B7280;
    --color-text-lighter:   #9CA3AF;
    --color-text-dark:      #111827;
    --color-text-on-dark:   rgba(255,255,255,0.85);
    --color-text-on-primary:#FFFFFF;

    /* ─── Semantic Colors ─── */
    --color-success:        #059669;
    --color-success-bg:     #ECFDF5;
    --color-error:          #DC2626;
    --color-error-bg:       #FEF2F2;
    --color-warning:        #D97706;
    --color-warning-bg:     #FFFBEB;
    --color-info:           #2563EB;
    --color-info-bg:        #EFF6FF;

    /* ─── Typography ─── */
    --font-family:          'Pretendard Variable', 'Pretendard',
                            -apple-system, BlinkMacSystemFont,
                            'Segoe UI', Roboto, 'Noto Sans KR',
                            sans-serif;

    --fs-xs:    0.75rem;     /* 12px */
    --fs-sm:    0.875rem;    /* 14px */
    --fs-base:  1rem;        /* 16px */
    --fs-lg:    1.125rem;    /* 18px */
    --fs-xl:    1.25rem;     /* 20px */
    --fs-2xl:   1.5rem;      /* 24px */
    --fs-3xl:   1.875rem;    /* 30px */
    --fs-4xl:   2.25rem;     /* 36px */
    --fs-5xl:   3rem;        /* 48px */
    --fs-6xl:   3.75rem;     /* 60px */

    --fw-light:     300;
    --fw-regular:   400;
    --fw-medium:    500;
    --fw-semibold:  600;
    --fw-bold:      700;
    --fw-extrabold: 800;

    --lh-tight:     1.25;
    --lh-snug:      1.375;
    --lh-normal:    1.5;
    --lh-relaxed:   1.625;
    --lh-loose:     1.8;

    --ls-tight:    -0.025em;
    --ls-normal:    0;
    --ls-wide:      0.025em;

    /* ─── Spacing Scale ─── */
    --sp-0:   0;
    --sp-1:   0.25rem;    /* 4px */
    --sp-2:   0.5rem;     /* 8px */
    --sp-3:   0.75rem;    /* 12px */
    --sp-4:   1rem;       /* 16px */
    --sp-5:   1.25rem;    /* 20px */
    --sp-6:   1.5rem;     /* 24px */
    --sp-8:   2rem;       /* 32px */
    --sp-10:  2.5rem;     /* 40px */
    --sp-12:  3rem;       /* 48px */
    --sp-14:  3.5rem;     /* 56px */
    --sp-16:  4rem;       /* 64px */
    --sp-20:  5rem;       /* 80px */
    --sp-24:  6rem;       /* 96px */
    --sp-32:  8rem;       /* 128px */

    /* ─── Layout ─── */
    --container-max:     1300px;
    --container-narrow:  900px;
    --container-padding: 1.5rem;
    --section-py:        5rem;
    --section-py-lg:     7rem;
    --header-height:     70px;

    /* ─── Border Radius ─── */
    --radius-xs:   2px;
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  24px;
    --radius-3xl:  32px;
    --radius-full: 9999px;

    /* ─── Box Shadows ─── */
    --shadow-xs:     0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm:     0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:     0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-lg:     0 10px 15px rgba(0,0,0,0.06), 0 4px 6px rgba(0,0,0,0.04);
    --shadow-xl:     0 20px 25px rgba(0,0,0,0.08), 0 8px 10px rgba(0,0,0,0.04);
    --shadow-2xl:    0 25px 50px rgba(0,0,0,0.12);
    --shadow-card:   0 2px 12px rgba(0,41,112,0.06);
    --shadow-card-hover: 0 8px 30px rgba(0,41,112,0.12);
    --shadow-float:  0 4px 20px rgba(0,41,112,0.18);
    --shadow-inner:  inset 0 2px 4px rgba(0,0,0,0.04);

    /* ─── Transitions ─── */
    --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in:       cubic-bezier(0.4, 0, 1, 1);
    --ease-out:      cubic-bezier(0, 0, 0.2, 1);
    --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

    --duration-fast:   150ms;
    --duration-base:   300ms;
    --duration-slow:   500ms;
    --duration-slower: 700ms;

    --transition-fast:   all 150ms var(--ease-default);
    --transition-base:   all 300ms var(--ease-default);
    --transition-slow:   all 500ms var(--ease-default);
    --transition-spring: all 500ms var(--ease-spring);

    /* ─── Z-index Scale ─── */
    --z-dropdown:   100;
    --z-sticky:     200;
    --z-fixed:      300;
    --z-overlay:    400;
    --z-modal:      500;
    --z-floating:   600;
    --z-toast:      700;
}