/* =============================================================================
   theme.css — CSS Custom Properties for Light & Dark Theme
   PayOne Financial Platform
   ============================================================================= */

/* ─── Google Fonts ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ─── Light Theme (default) ────────────────────────────────────────────────── */
:root,
[data-theme="light"] {
    --bg-primary:       #f0f4ff;
    --bg-secondary:     #ffffff;
    --bg-card:          #ffffff;
    --bg-sidebar:       #0f172a;
    --bg-navbar:        #ffffff;
    --bg-input:         #ffffff;
    --input-bg:         #ffffff;

    --text-primary:     #0f172a;
    --text-secondary:   #475569;
    --text-muted:       #94a3b8;
    --text-input:       #1F2937;
    --input-text:       #1F2937;
    --text-color:       #1F2937;
    --placeholder-color: #6B7280;
    --input-placeholder: #6B7280;
    --text-sidebar:     #cbd5e1;
    --text-sidebar-active: #ffffff;

    --border-color:     #e2e8f0;
    --border-input:     #cbd5e1;

    --accent-primary:   #6366f1;
    --accent-hover:     #4f46e5;
    --accent-light:     #eef2ff;

    --btn-cancel-bg:           #E5E7EB;
    --btn-cancel-text:         #374151;
    --btn-cancel-border:       #D1D5DB;
    --btn-cancel-hover-bg:     #D1D5DB;
    --btn-cancel-hover-border: #D1D5DB;

    --success:          #10b981;
    --success-light:    #d1fae5;
    --danger:           #ef4444;
    --danger-light:     #fee2e2;
    --warning:          #f59e0b;
    --warning-light:    #fef3c7;
    --info:             #3b82f6;
    --info-light:       #dbeafe;

    --shadow-sm:        0 1px 3px rgba(0,0,0,0.08);
    --shadow-md:        0 4px 16px rgba(0,0,0,0.10);
    --shadow-lg:        0 10px 40px rgba(0,0,0,0.12);
    --shadow-card:      0 2px 8px rgba(99,102,241,0.08);

    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    --gradient-danger:  linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-warning: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
    --gradient-info:    linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --gradient-dark:    linear-gradient(135deg, #0f172a 0%, #1e293b 100%);

    --sidebar-width:    260px;
    --navbar-height:    64px;
    --radius-sm:        6px;
    --radius-md:        12px;
    --radius-lg:        16px;
    --radius-xl:        24px;
    --transition:       all 0.3s cubic-bezier(0.4,0,0.2,1);
}

/* ─── Dark Theme ───────────────────────────────────────────────────────────── */
[data-theme="dark"] {
    --bg-primary:       #0a0f1e;
    --bg-secondary:     #111827;
    --bg-card:          #1e2535;
    --bg-sidebar:       #0d1117;
    --bg-navbar:        #111827;
    --bg-input:         #1E293B;
    --input-bg:         #1E293B;

    --text-primary:     #f1f5f9;
    --text-secondary:   #94a3b8;
    --text-muted:       #64748b;
    --text-input:       #F8FAFC;
    --input-text:       #F8FAFC;
    --text-color:       #F8FAFC;
    --placeholder-color: #94A3B8;
    --input-placeholder: #94A3B8;
    --text-sidebar:     #94a3b8;
    --text-sidebar-active: #ffffff;

    --border-color:     #1e2d3d;
    --border-input:     #2d3f50;

    --btn-cancel-bg:           #334155;
    --btn-cancel-text:         #F8FAFC;
    --btn-cancel-border:       #475569;
    --btn-cancel-hover-bg:     #475569;
    --btn-cancel-hover-border: #475569;

    --accent-light:     rgba(99,102,241,0.15);
    --success-light:    rgba(16,185,129,0.15);
    --danger-light:     rgba(239,68,68,0.15);
    --warning-light:    rgba(245,158,11,0.15);
    --info-light:       rgba(59,130,246,0.15);

    --shadow-sm:        0 1px 3px rgba(0,0,0,0.3);
    --shadow-md:        0 4px 16px rgba(0,0,0,0.4);
    --shadow-lg:        0 10px 40px rgba(0,0,0,0.5);
    --shadow-card:      0 2px 8px rgba(0,0,0,0.4);
}

/* ─── Day/Night Theme Toggle Button ──────────────────────────────────────── */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-card, #ffffff);
    color: var(--text-secondary, #475569);
    cursor: pointer;
    transition: all 0.25s ease;
    font-size: 16px;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
    outline: none;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
}
.theme-toggle:hover {
    background: var(--accent-light, #eef2ff);
    color: var(--accent-primary, #6366f1);
    transform: scale(1.08);
}
[data-theme="dark"] .theme-toggle {
    background: var(--bg-card, #1e2535);
    border-color: var(--border-color, #1e2d3d);
    color: #f59e0b; /* Golden sun color in dark mode */
}

/* ─── Eye Color Adaptive Themes ─────────────────────────────────────────────── */

/* 1. Brown Eyes (Warm Amber, Copper, Bronze, Caramel) */
[data-eye-color="brown"] {
    --accent-primary:   #d97706;
    --accent-hover:     #b45309;
    --accent-light:     rgba(217, 119, 6, 0.12);
    --gradient-primary: linear-gradient(135deg, #d97706 0%, #b45309 60%, #92400e 100%);
    --shadow-card:      0 2px 10px rgba(217, 119, 6, 0.12);
    --btn-focus-ring:   0 0 0 3px rgba(217, 119, 6, 0.35);
}

/* 2. Dark Brown Eyes (Deep Bronze, Coffee, Gold Accent) */
[data-eye-color="dark-brown"] {
    --accent-primary:   #92400e;
    --accent-hover:     #78350f;
    --accent-light:     rgba(146, 64, 14, 0.15);
    --gradient-primary: linear-gradient(135deg, #92400e 0%, #78350f 60%, #451a03 100%);
    --shadow-card:      0 2px 10px rgba(146, 64, 14, 0.12);
    --btn-focus-ring:   0 0 0 3px rgba(146, 64, 14, 0.35);
}

/* 3. Blue Eyes (Royal Blue, Azure, Sky Blue) */
[data-eye-color="blue"] {
    --accent-primary:   #2563eb;
    --accent-hover:     #1d4ed8;
    --accent-light:     rgba(37, 99, 235, 0.12);
    --gradient-primary: linear-gradient(135deg, #2563eb 0%, #1d4ed8 60%, #1e40af 100%);
    --shadow-card:      0 2px 10px rgba(37, 99, 235, 0.12);
    --btn-focus-ring:   0 0 0 3px rgba(37, 99, 235, 0.35);
}

/* 4. Green Eyes (Emerald, Mint, Teal) */
[data-eye-color="green"] {
    --accent-primary:   #059669;
    --accent-hover:     #047857;
    --accent-light:     rgba(5, 150, 105, 0.12);
    --gradient-primary: linear-gradient(135deg, #10b981 0%, #059669 60%, #0f766e 100%);
    --shadow-card:      0 2px 10px rgba(5, 150, 105, 0.12);
    --btn-focus-ring:   0 0 0 3px rgba(5, 150, 105, 0.35);
}

/* 5. Hazel Eyes (Olive, Forest Green, Gold Accent) */
[data-eye-color="hazel"] {
    --accent-primary:   #65a30d;
    --accent-hover:     #4d7c0f;
    --accent-light:     rgba(101, 163, 13, 0.14);
    --gradient-primary: linear-gradient(135deg, #65a30d 0%, #4d7c0f 60%, #15803d 100%);
    --shadow-card:      0 2px 10px rgba(101, 163, 13, 0.12);
    --btn-focus-ring:   0 0 0 3px rgba(101, 163, 13, 0.35);
}

/* 6. Gray Eyes (Slate Blue, Steel Gray, Silver) */
[data-eye-color="gray"] {
    --accent-primary:   #475569;
    --accent-hover:     #334155;
    --accent-light:     rgba(71, 85, 105, 0.14);
    --gradient-primary: linear-gradient(135deg, #475569 0%, #334155 60%, #1e293b 100%);
    --shadow-card:      0 2px 10px rgba(71, 85, 105, 0.12);
    --btn-focus-ring:   0 0 0 3px rgba(71, 85, 105, 0.35);
}

/* 7. Black Eyes (Midnight Blue, Deep Indigo, Dark Purple) */
[data-eye-color="black"] {
    --accent-primary:   #4338ca;
    --accent-hover:     #3730a3;
    --accent-light:     rgba(67, 56, 202, 0.14);
    --gradient-primary: linear-gradient(135deg, #312e81 0%, #4338ca 60%, #4c1d95 100%);
    --shadow-card:      0 2px 10px rgba(67, 56, 202, 0.12);
    --btn-focus-ring:   0 0 0 3px rgba(67, 56, 202, 0.35);
}

/* 8. Default (Original Theme Reset) */
[data-eye-color="default"] {
    --accent-primary:   #6366f1;
    --accent-hover:     #4f46e5;
    --accent-light:     #eef2ff;
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --shadow-card:      0 2px 8px rgba(99,102,241,0.08);
    --btn-focus-ring:   0 0 0 3px rgba(99,102,241,0.35);
}