/**
 * variables.css - Glass Morphism Dark Purple Theme
 * index.php 기준 통일된 디자인 시스템
 */

:root {
    /* ===== 라이트 모드 (기본) ===== */
    --bg-body: #f8f9fa;
    --bg-card: #ffffff;
    --bg-card-hover: #f8f9ff;
    --bg-input: #ffffff;
    --bg-header: #ffffff;
    --bg-nav: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
    --bg-table-header: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);

    --text-primary: #2d3436;
    --text-secondary: #636e72;
    --text-muted: #b2bec3;
    --text-white: #ffffff;
    --text-link: #a855f7;

    --border-color: #e9ecef;
    --border-input: #dee2e6;

    --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.16);

    /* ===== 그라데이션 (공통) - 퍼플-핑크 테마 ===== */
    --gradient-primary: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
    --gradient-success: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    --gradient-danger: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
    --gradient-info: linear-gradient(135deg, #06b6d4 0%, #22d3ee 100%);
    --gradient-pink: linear-gradient(135deg, #ec4899 0%, #f472b6 100%);
    --gradient-purple: linear-gradient(135deg, #a855f7 0%, #c084fc 100%);

    /* ===== 색상 - 퍼플-핑크 테마 ===== */
    --primary: #a855f7;
    --secondary: #ec4899;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #06b6d4;

    /* ===== 크기 - border-radius 14px 통일 ===== */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 14px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* ===== 트랜지션 ===== */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.4s ease;

    /* ===== 폰트 ===== */
    --font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', sans-serif;
}

/* ===== 다크 모드 ===== */
[data-theme="dark"] {
    --bg-body: #0f0f1a;
    --bg-card: rgba(255, 255, 255, 0.08);
    --bg-card-hover: rgba(255, 255, 255, 0.12);
    --bg-input: rgba(255, 255, 255, 0.05);
    --bg-header: rgba(15, 15, 26, 0.95);

    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-muted: rgba(255, 255, 255, 0.5);
    --text-link: #c084fc;

    --border-color: rgba(255, 255, 255, 0.1);
    --border-input: rgba(255, 255, 255, 0.2);

    --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
}