/**
 * Ví Tiền Design Tokens
 * CSS Variables cho thương hiệu tài chính
 * Đồng bộ design system toàn ứng dụng
 */

:root {

    /* =========================
       THU NHẬP
    ========================= */

    --income-color: #16A34A;
    --income-bg: #ECFDF3;
    --income-border: #86EFAC;
    --income-hover: #DCFCE7;
    --income-icon: #15803D;

    /* =========================
       CHI TIÊU
    ========================= */

    --expense-color: #EF4444;
    --expense-bg: #FEF2F2;
    --expense-border: #FCA5A5;
    --expense-hover: #FEE2E2;
    --expense-icon: #DC2626;

    /* =========================
       CHUYỂN KHOẢN
    ========================= */

    --transfer-color: #3B82F6;
    --transfer-bg: #EFF6FF;
    --transfer-border: #93C5FD;
    --transfer-hover: #DBEAFE;
    --transfer-icon: #2563EB;

    /* =========================
       KHOẢN VAY
    ========================= */

    --loan-color: #F59E0B;
    --loan-bg: #FFFBEB;
    --loan-border: #FCD34D;
    --loan-hover: #FEF3C7;
    --loan-icon: #D97706;

    /* =========================
       TIẾT KIỆM
    ========================= */

    --saving-color: #14B8A6;
    --saving-bg: #F0FDFA;
    --saving-border: #5EEAD4;
    --saving-hover: #CCFBF1;
    --saving-icon: #0F766E;

    /* =========================
       MỤC TIÊU
    ========================= */

    --goal-color: #8B5CF6;
    --goal-bg: #F5F3FF;
    --goal-border: #C4B5FD;
    --goal-hover: #EDE9FE;
    --goal-icon: #7C3AED;

    /* =========================
       FINANCIAL STATUS
    ========================= */

    --balance-positive: #16A34A;
    --balance-negative: #EF4444;
    --balance-neutral: #6B7280;

    /* Số dư */
    --balance-bg: #F0FDF4;
    --balance-border: #BBF7D0;

    /* Cảnh báo vượt ngân sách */
    --budget-warning: #F59E0B;
    --budget-danger: #DC2626;

    /* Dòng tiền */
    --cashflow-in: #22C55E;
    --cashflow-out: #EF4444;

    /* =========================
       ACCOUNT TYPES
    ========================= */

    --wallet-color: #6366F1;
    --wallet-bg: #EEF2FF;

    --bank-color: #2563EB;
    --bank-bg: #EFF6FF;

    --cash-color: #16A34A;
    --cash-bg: #F0FDF4;

    --credit-card-color: #EC4899;
    --credit-card-bg: #FDF2F8;

    --investment-color: #8B5CF6;
    --investment-bg: #F5F3FF;

    /* =========================
       EXPENSE CATEGORY
    ========================= */

    --food-color: #F97316;
    --food-bg: #FFF7ED;

    --transport-color: #3B82F6;
    --transport-bg: #EFF6FF;

    --home-color: #8B5CF6;
    --home-bg: #F5F3FF;

    --health-color: #14B8A6;
    --health-bg: #F0FDFA;

    --education-color: #0EA5E9;
    --education-bg: #F0F9FF;

    --shopping-color: #EC4899;
    --shopping-bg: #FDF2F8;

    --entertainment-color: #A855F7;
    --entertainment-bg: #FAF5FF;

    /* =========================
       CHART
    ========================= */

    --chart-income: #22C55E;
    --chart-expense: #EF4444;
    --chart-saving: #14B8A6;
    --chart-invest: #8B5CF6;

    --chart-grid: #E5E7EB;
    --chart-text: #6B7280;

    --chart-tooltip-bg: #111827;
    --chart-tooltip-text: #FFFFFF;

    /* =========================
       ACHIEVEMENT
    ========================= */

    --achievement-gold: #FBBF24;
    --achievement-silver: #94A3B8;
    --achievement-bronze: #D97706;

    --streak-color: #F97316;

    --xp-color: #8B5CF6;

    --coin-color: #EAB308;

    /* =========================
       STATUS
    ========================= */

    --status-success: #16A34A;
    --status-success-bg: #DCFCE7;

    --status-pending: #F59E0B;
    --status-pending-bg: #FEF3C7;

    --status-failed: #EF4444;
    --status-failed-bg: #FEE2E2;

    --status-cancel: #6B7280;
    --status-cancel-bg: #F3F4F6;

    /* =========================
       TRANSACTION
    ========================= */

    --transaction-income: var(--income-color);
    --transaction-expense: var(--expense-color);
    --transaction-transfer: var(--transfer-color);
    --transaction-loan: var(--loan-color);
    --transaction-saving: var(--saving-color);

    /* =========================
       MOBILE
    ========================= */

    --bottom-nav-height: 64px;
    --safe-area-bottom: env(safe-area-inset-bottom);
    --mobile-padding: 16px;
    --mobile-card-gap: 12px;

    /* =========================
       ACCESSIBILITY
    ========================= */

    --focus-ring: 0 0 0 3px rgba(22,194,107,.25);
    --disabled-opacity: .5;
    --overlay: rgba(0,0,0,.45);

    /* =========================
       GRADIENT
    ========================= */

    --gradient-primary: linear-gradient(135deg, #16C26B, #0EA85B);
    --gradient-income: linear-gradient(135deg, #22C55E, #16A34A);
    --gradient-saving: linear-gradient(135deg, #14B8A6, #0F766E);

    /* =========================
       TYPOGRAPHY SCALE
    ========================= */

    --text-display: 40px;
    --text-h1: 32px;
    --text-h2: 24px;
    --text-h3: 20px;
    --text-body: 16px;
    --text-caption: 13px;

    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;

    /* =========================
       COLOR TOKENS
    ========================= */

    /* PRIMARY */
    --color-primary-50: #eefbf5;
    --color-primary-100: #d7f7e7;
    --color-primary-200: #b1efd0;
    --color-primary-300: #7ee4b0;
    --color-primary-400: #43d48a;
    --color-primary-500: #16c26b;
    --color-primary-600: #0ea85b;
    --color-primary-700: #0c874a;
    --color-primary-800: #0d6a3d;
    --color-primary-900: #0c5633;

    /* SUCCESS */
    --color-success: #16a34a;

    /* WARNING */
    --color-warning: #f59e0b;

    /* ERROR */
    --color-danger: #ef4444;

    /* INFO */
    --color-info: #0ea5e9;

    /* =========================
       BACKGROUND TOKENS
    ========================= */

    --bg-app: #F5F7FB;
    --bg-page: #FFFFFF;
    --bg-card: #FFFFFF;
    --bg-modal: #FFFFFF;
    --bg-sidebar: #FFFFFF;
    --bg-hover: #F4F6F9;
    --bg-disabled: #F2F4F7;

    /* =========================
       TEXT TOKENS
    ========================= */

    --text-primary: #111827;
    --text-secondary: #6B7280;
    --text-muted: #9CA3AF;
    --text-placeholder: #C4C4C4;
    --text-white: #FFFFFF;

    /* =========================
       BORDER TOKENS
    ========================= */

    --border-color: #E5E7EB;
    --border-light: #F1F5F9;
    --border-dark: #CBD5E1;
    --border-focus: #16c26b;

    /* =========================
       SHADOW TOKENS
    ========================= */

    --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
    --shadow-sm: 0 2px 6px rgba(0,0,0,.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,.12);
    --shadow-lg: 0 12px 32px rgba(0,0,0,.16);
    --shadow-xl: 0 20px 48px rgba(0,0,0,.22);

    /* =========================
       RADIUS TOKENS
    ========================= */

    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    /* =========================
       SPACING TOKENS
    ========================= */

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;

    /* =========================
       FONT TOKENS
    ========================= */

    --font-family:
        Inter,
        Roboto,
        "Segoe UI",
        sans-serif;

    --font-xs: 12px;
    --font-sm: 14px;
    --font-md: 16px;
    --font-lg: 18px;
    --font-xl: 22px;
    --font-2xl: 28px;

    /* =========================
       FONT WEIGHT
    ========================= */

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* =========================
       ANIMATION TOKENS
    ========================= */

    --transition-fast: .15s;
    --transition: .25s;
    --transition-slow: .4s;

    /* =========================
       Z-INDEX TOKENS
    ========================= */

    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal: 1040;
    --z-toast: 1050;
    --z-tooltip: 1060;

    /* =========================
       COMPONENT TOKENS
    ========================= */

    /* BUTTON */
    --btn-height: 48px;
    --btn-radius: 12px;
    --btn-font-size: 15px;

    /* INPUT */
    --input-height: 48px;
    --input-radius: 12px;
    --input-padding: 16px;

    /* CARD */
    --card-radius: 16px;
    --card-padding: 20px;

    /* MODAL */
    --modal-radius: 20px;
    --modal-padding: 24px;

    /* HEADER */
    --header-height: 64px;

    /* SIDEBAR */
    --sidebar-width: 280px;

}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    :root {
        --text-primary: #F9FAFB;
        --text-secondary: #9CA3AF;
        --text-muted: #6B7280;
        --text-placeholder: #4B5563;

        --bg-app: #111827;
        --bg-page: #1F2937;
        --bg-card: #1F2937;
        --bg-modal: #1F2937;
        --bg-sidebar: #1F2937;
        --bg-hover: #374151;
        --bg-disabled: #374151;

        --border-color: #374151;
        --border-light: #4B5563;
        --border-dark: #6B7280;
        --border-focus: #16c26b;
    }
}

/* Print styles */
@media print {
    :root {
        --color-primary-500: #000000;
        --shadow-sm: none;
        --shadow-md: none;
        --shadow-lg: none;
        --shadow-xl: none;
    }
}