/**
 * HC Login Pro - CSS 변수
 * HC Joyn Divine Light Beam — 라이트 테마 적용
 *
 * File: variables.css
 * 참조: /wp-content/docs/Joyn/hc-joyn-design-tokens.md
 */

:root {
    /* ========================================
       HC Joyn Divine Light — 라이트 테마 토큰
       ======================================== */
    --brand: #9e7c24;
    --brand-light: #c4a044;
    --brand-dark: #7b6018;
    --brand-glow: rgba(158, 124, 36, 0.12);

    --bg-root: #f4f1eb;
    --bg-1: #edeae3;
    --bg-2: #e5e2da;
    --bg-3: #d9d5cc;
    --bg-4: #cbc7bd;
    --bg-card: #ffffff;
    --bg-card-hover: #fdfcfa;
    --bg-input: #f8f6f2;
    --bg-glass: rgba(255, 255, 255, 0.9);

    --text-1: #1a1814;
    --text-2: #57524a;
    --text-3: #908a80;

    --border-1: rgba(158, 124, 36, 0.28);
    --border-2: rgba(28, 24, 20, 0.08);

    --shadow-sm: 0 1px 3px rgba(28, 24, 20, 0.06);
    --shadow-md: 0 4px 12px rgba(28, 24, 20, 0.08);
    --shadow-lg: 0 10px 25px rgba(28, 24, 20, 0.1);
    --shadow-xl: 0 20px 40px rgba(28, 24, 20, 0.12);

    /* ========================================
       PRIMARY (브랜드 골드 매핑)
       ======================================== */
    --hc-primary: var(--brand);
    --hc-primary-hover: var(--brand-dark);
    --hc-primary-light: var(--brand-glow);
    --hc-primary-dark: var(--brand-dark);
    --hc-primary-rgb: 158, 124, 36;

    /* Secondary - 앰버 유지 (알림 등) */
    --hc-secondary: #c4a044;
    --hc-secondary-hover: #7b6018;
    --hc-secondary-light: #fdfcfa;

    /* ========================================
       STATUS COLORS (유지)
       ======================================== */
    --hc-success: #10b981;
    --hc-success-light: #ecfdf5;
    --hc-success-rgb: 16, 185, 129;

    --hc-error: #ef4444;
    --hc-error-light: #fef2f2;
    --hc-error-rgb: 239, 68, 68;

    --hc-warning: #f59e0b;
    --hc-warning-light: #fffbeb;
    --hc-warning-rgb: 245, 158, 11;

    --hc-info: #3b82f6;
    --hc-info-light: #eff6ff;
    --hc-info-rgb: 59, 130, 246;

    /* ========================================
       NEUTRAL (라이트 테마 그레이)
       ======================================== */
    --hc-gray-50: #fdfcfa;
    --hc-gray-100: #f8f6f2;
    --hc-gray-200: #e5e2da;
    --hc-gray-300: #d9d5cc;
    --hc-gray-400: #908a80;
    --hc-gray-500: #57524a;
    --hc-gray-600: #45403a;
    --hc-gray-700: #36322e;
    --hc-gray-800: #252320;
    --hc-gray-900: #1a1814;

    /* ========================================
       TEXT COLORS (Joyn 라이트)
       ======================================== */
    --hc-text-primary: var(--text-1);
    --hc-text-secondary: var(--text-2);
    --hc-text-muted: var(--text-3);
    --hc-text-light: var(--text-3);
    --hc-text-inverse: #ffffff;

    /* ========================================
       BACKGROUND COLORS (Joyn 라이트)
       ======================================== */
    --hc-bg-primary: var(--bg-card);
    --hc-bg-secondary: var(--bg-root);
    --hc-bg-tertiary: var(--bg-1);
    --hc-bg-card: var(--bg-card);
    --hc-bg-input: var(--bg-input);

    /* ========================================
       BORDER COLORS (Joyn 라이트)
       ======================================== */
    --hc-border: var(--border-2);
    --hc-border-light: rgba(28, 24, 20, 0.06);
    --hc-border-dark: var(--border-1);
    --hc-border-focus: var(--brand);

    /* ========================================
       TYPOGRAPHY (Joyn / Pretendard)
       ======================================== */
    --hc-font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --hc-font-mono: 'SF Mono', Monaco, Consolas, monospace;

    --hc-text-xs: clamp(0.75rem, 2vw, 0.875rem);
    --hc-text-sm: clamp(0.875rem, 2.5vw, 1rem);
    --hc-text-base: clamp(1rem, 3.5vw, 1.25rem);
    --hc-text-lg: clamp(1.125rem, 4vw, 1.5rem);
    --hc-text-xl: clamp(1.25rem, 5vw, 1.75rem);
    --hc-text-2xl: clamp(1.5rem, 6vw, 2.25rem);
    --hc-text-3xl: clamp(1.875rem, 7vw, 2.5rem);
    --hc-text-4xl: clamp(2rem, 8vw, 3rem);

    --hc-font-normal: 400;
    --hc-font-medium: 500;
    --hc-font-semibold: 600;
    --hc-font-bold: 700;

    /* ========================================
       SPACING (Joyn 스페이싱)
       ======================================== */
    --hc-space-1: clamp(0.25rem, 1.5vw, 0.75rem);
    --hc-space-2: 0.5rem;
    --hc-space-3: 0.75rem;
    --hc-space-4: 1rem;
    --hc-space-5: 1.25rem;
    --hc-space-6: 1.5rem;
    --hc-space-8: 2rem;
    --hc-space-10: 2.5rem;
    --hc-space-12: 3rem;

    /* ========================================
       COMPONENT SIZES
       ======================================== */
    --hc-input-height: 52px;
    --hc-input-height-sm: 44px;
    --hc-input-height-lg: 60px;

    --hc-btn-height: 52px;
    --hc-btn-height-sm: 44px;
    --hc-btn-height-lg: 60px;

    /* ========================================
       BORDER RADIUS (Joyn: 카드 16px, 버튼/입력 8px)
       ======================================== */
    --hc-radius-sm: 6px;
    --hc-radius-md: 8px;
    --hc-radius-lg: 8px;
    --hc-radius-xl: 16px;
    --hc-radius-2xl: 24px;
    --hc-radius-full: 9999px;

    /* ========================================
       SHADOWS (Joyn 라이트)
       ======================================== */
    --hc-shadow-sm: var(--shadow-sm);
    --hc-shadow: var(--shadow-sm);
    --hc-shadow-md: var(--shadow-md);
    --hc-shadow-lg: var(--shadow-lg);
    --hc-shadow-xl: var(--shadow-xl);

    --hc-focus-ring: 0 0 0 3px var(--brand-glow);
    --hc-focus-ring-error: 0 0 0 3px rgba(239, 68, 68, 0.15);
    --hc-focus-ring-success: 0 0 0 3px rgba(16, 185, 129, 0.15);

    /* ========================================
       TRANSITIONS (Joyn)
       ======================================== */
    --hc-transition-fast: 150ms ease;
    --hc-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --hc-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ========================================
       FORM SIZES
       ======================================== */
    --hc-form-width: 420px;
    --hc-form-width-sm: 360px;
    --hc-form-width-lg: 520px;
    --hc-form-width-xl: 640px;

    /* ========================================
       Z-INDEX
       ======================================== */
    --hc-z-dropdown: 100;
    --hc-z-modal: 1000;
    --hc-z-toast: 1100;
    --hc-z-tooltip: 1200;
}

/* ========================================
   모바일 최적화
   ======================================== */
@media (max-width: 640px) {
    :root {
        --hc-input-height: 48px;
        --hc-btn-height: 48px;
    }
}