/* base.css - Core styles for P2P Gold Lending System */

/* ========== CSS VARIABLES ========== */
:root {
    /* Color Palette */
    --bg-dark: #0f1419;
    --bg-card: #1a2029;
    --bg-hover: #252e3d;
    --text-primary: #ffffff;
    --text-secondary: #a0aec0;
    --text-placeholder: #94a3b8; /* NEW: Lighter placeholder color */
    --accent-gold: #fbbf24;
    --accent-teal: #2dd4bf;
    --accent-blue: #60a5fa;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --border-color: #2d3748;
    
    /* Gradients */
    --gradient-gold: linear-gradient(135deg, var(--accent-gold), var(--warning));
    --gradient-success: linear-gradient(135deg, var(--success), #059669);
    --gradient-danger: linear-gradient(135deg, var(--danger), #dc2626);
    
    /* Shadows */
    --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    
    /* Border Radius */
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 8px;
    
    /* Transitions */
    --transition-fast: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-medium: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Z-index layers */
    --z-base: 1;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;
    --z-loading-overlay: 1090;
}

/* ========== CSS RESET ========== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========== PLACEHOLDER STYLES ========== */
::placeholder {
    color: var(--text-placeholder);
    opacity: 1;
}

:-ms-input-placeholder {
    color: var(--text-placeholder);
}

::-ms-input-placeholder {
    color: var(--text-placeholder);
}

/* Focus placeholder */
.form-control:focus::placeholder,
.form-select:focus::placeholder {
    color: rgba(148, 163, 184, 0.7);
}

/* ========== BASE TYPOGRAPHY ========== */
body {
    background: linear-gradient(135deg, var(--bg-dark) 0%, #1a1f2c 100%);
    color: var(--text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    min-height: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========== ACCESSIBILITY ========== */
/* Focus styles */
:focus {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* High contrast mode */
@media (prefers-contrast: high) {
    :root {
        --bg-dark: #000000;
        --bg-card: #111111;
        --text-primary: #ffffff;
        --text-secondary: #cccccc;
        --border-color: #ffffff;
    }
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========== CONTAINER & LAYOUT ========== */
.container-fluid {
    padding: 0 1rem;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.main-content {
    padding: 1rem 0 3rem 0;
}

/* ========== UTILITY CLASSES ========== */
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }
.text-info { color: var(--accent-blue); }
.text-gold { color: var(--accent-gold); }

.bg-success { background-color: var(--success); }
.bg-warning { background-color: var(--warning); }
.bg-danger { background-color: var(--danger); }
.bg-gold { background-color: var(--accent-gold); }

.d-none { display: none !important; }
.d-flex { display: flex !important; }
.d-block { display: block !important; }
.d-grid { display: grid !important; }

.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 2rem !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 2rem !important; }

/* ========== IOS FIXES ========== */
/* Prevent zoom on input focus in iOS */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px; /* Minimum size to prevent zoom */
    }
}

/* ========== ANIMATIONS ========== */
@keyframes loading-dot {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1.0); }
}

@keyframes progressAnimation {
    0% {
        width: 0%;
        transform: translateX(0);
    }
    50% {
        width: 100%;
        transform: translateX(0);
    }
    100% {
        width: 0%;
        transform: translateX(100%);
    }
}

@keyframes logoPulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0.8;
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}