/**
 * ============================================================
 * MoneyBull Calculator - Global Design System
 * CSS Variables (Refined Ver.)
 * ============================================================
 */

:root {
    /* ========================================================
       Color System
    ======================================================== */
    /* Brand Accent (네이티브 핀테크 감성의 선명한 그린) */
    --color-primary: #00b050;
    --color-primary-dark: #008a3e;
    --color-primary-light: #e6f7ed;
    --color-primary-focus: rgba(0, 176, 80, 0.18); /* box-shadow 아웃라인용 */

    /* Brand Gradient */
    --gradient-primary: linear-gradient(135deg, #10b981, #059669);
    --gradient-success: linear-gradient(135deg, #34d399, #059669);
    --gradient-money: linear-gradient(135deg, #0284c7, #0369a1); /* 자산 증가용 블루-스카이 믹스 */

    /* Backgrounds & Surfaces (명도 대비 대폭 개선) */
    --color-background: #f4f6f9;        /* 카드가 더 도드라져 보이도록 배경을 살짝 다운 */
    --color-background-soft: #eaf0f6;
    --color-background-dark: #0f172a;
    --color-surface: #ffffff;           /* 순백색 카드 컴포넌트 */

    /* Text Typography Colors (가독성 보정) */
    --color-text-primary: #1e293b;     /* 깊이감 있는 Slate 대치 */
    --color-text-secondary: #475569;
    --color-text-muted: #94a3b8;       /* 인풋 안내 문구용 */
    --color-text-white: #ffffff;

    /* Borders */
    --color-border: #e2e8f0;           /* 경계선 톤 정돈 */
    --color-border-light: #f1f5f9;

    /* Status Indicators */
    --color-success: #10b981;
    --color-danger: #ef4444;
    --color-warning: #f59e0b;

    /* Investment Metrics (수익금 및 ROI 대조 극대화) */
    --color-profit: #22c55e;           /* 투자 수익금 강조용 라이트 그린 */
    --color-profit-light: #f0fdf4;
    --color-loss: #f43f5e;
    --color-badge: #f0fdf4;

    /* ========================================================
       Typography
    ======================================================== */
    --font-family-base: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.75rem;          /* 최종 자산 전용 초대형 폰트 크기 확보 */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;      /* 금액 강조용 */

    /* ========================================================
       Spacing System (8px Grid & Micro Spacing)
    ======================================================== */
    --space-1: 0.25rem;  /* 4px */
    --space-2: 0.5rem;   /* 8px */
    --space-3: 0.75rem;  /* 12px */
    --space-4: 1rem;     /* 16px */
    --space-5: 1.25rem;  /* 20px */
    --space-6: 1.5rem;   /* 24px */
    --space-8: 2rem;     /* 32px */
    --space-10: 2.5rem;  /* 40px */
    --space-12: 3rem;    /* 48px */

    /* ========================================================
       Border Radius
    ======================================================== */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;              /* 현재 인풋 박스 곡률 */
    --radius-lg: 1.25rem;              /* 현재 메인 카드 박스 곡률 최적화 */
    --radius-xl: 1.75rem;
    --radius-full: 9999px;

    /* ========================================================
       Shadows & Elevation (가젯 입체감 부여) */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
    --shadow-lg: 0 10px 25px -5px rgba(0,0,0,0.05), 0 8px 10px -6px rgba(0,0,0,0.05);
    --shadow-card: 0 12px 24px -4px rgba(148, 163, 184, 0.12), 0 4px 12px -2px rgba(148, 163, 184, 0.06);
    --shadow-hover: 0 20px 32px -6px rgba(148, 163, 184, 0.22);

    /* ========================================================
       Component Specs (Cards, Layouts, Charts)
    ======================================================== */
    /* Cards */
    --card-background: var(--color-surface);
    --card-border: 1px solid var(--color-border);
    --card-padding: 2.5rem;            /* 가독성을 위해 카드 패딩 확장 */

    /* Chart 레이어 전용 컬러 (원금 vs 최종자산) */
    --chart-line-total: #00b050;       /* 총 자산 선 (그린) */
    --chart-line-principal: #94a3b8;   /* 투입 원금 선 (슬레이트 그레이) */
    --chart-area-total: rgba(0, 176, 80, 0.08);
    --chart-area-principal: rgba(148, 163, 184, 0.05);
    --chart-grid: rgba(226, 232, 240, 0.8);

    /* Layout Geometry */
    --container-width: 1040px;         /* 너무 와이드하지 않게 조여 가젯 집중도 향상 */
    --content-width: 800px;
    --header-height: 80px;

    /* Transitions & Interactivity */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --animation-duration: 0.5s;

    /* Z-Index Hierarchy */
    --z-header: 100;
    --z-modal: 500;
    --z-tooltip: 1000;
}