/* FreshPayz Color Scheme CSS Variables */

:root {
    /* Background Colors */
    --bg-primary: rgba(3, 21, 33, 1);
    --bg-secondary: rgba(8, 45, 64, 0.66);
    --bg-card: #031521;
    --bg-navbar: #082D40;
    --bg-sidebar: #136165;
    --bg-card-hover: rgba(8, 45, 64, 0.8);
    --bg-overlay: rgba(3, 21, 33, 0.95);
    
    /* Accent Colors - Gold */
    --color-gold: #DB9B1E;
    --color-gold-light: #e7bc69;
    --color-gold-hover: #f5a507;
    --color-gold-alt: #FDBC5C;
    
    /* Teal/Cyan Colors */
    --color-teal-primary: #136165;
    --color-teal-dark: #0B3B48;
    --color-teal-darker: #072A36;
    --color-teal-accent: #2589AC;
    --color-teal-border: #2D6A77;
    --color-teal-light: #19515E;
    
    /* Text Colors */
    --text-primary: #FFFFFF;
    --text-secondary: #E4E4E4;
    --text-muted: #97A9A8;
    --text-placeholder: #A8C1D2;
    --text-dark: #000000;
    
    /* Border Colors */
    --border-primary: #2D6A77;
    --border-gold: rgba(219, 155, 30, 1);
    --border-white: #FFFFFF;
    --border-blue: #0088FF;
    --border-teal: #2589AC;
    
    /* Social Media Colors */
    --social-red: #FF0000;
    --social-blue: #267FD1;
    --social-pink: #FA3C3C;
    --social-cyan: #42A4FF;
    --social-green: #07C86B;
    --social-pink-alt: #FF5E84;
    
    /* Gradients */
    --gradient-heading: linear-gradient(-40deg, #db9b1e 0%, #C0D4C9 100%);
    --gradient-button: linear-gradient(60deg, rgba(37, 137, 172, 1) 0%, rgba(219, 155, 30, 1) 100%);
    --gradient-button-alt: linear-gradient(180deg, #2589AC 0%, #DB9B1E 100%);
    --gradient-text: linear-gradient(21deg, #B7CEA6 0%, #ECFBFE 36.98%, #FCFEF5 69.27%, #C0D4C9 100%);
    --gradient-hero: radial-gradient(60.25% 73.6% at 14.86% 21.69%, #136165 0.82%, #0B3B48 30.73%, #072A36 64.58%, rgba(3, 21, 33, 0.00) 100%);
    --gradient-footer: radial-gradient(53.25% 96.6% at 53.86% 100.69%, #136165 0.82%, #0B3B48 30.73%, #072A36 64.58%, rgba(3, 21, 33, 0.00) 100%);
    --gradient-arrow: linear-gradient(180deg, #8ED3FF 0%, #0088FF 100%);
    --gradient-gateway: linear-gradient(161deg, #FDED5C 0%, #8ED3FF 64.16%, #08F 100%);
    
    /* Typography */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Poppins', sans-serif;
    
    /* Legacy variable mappings for compatibility */
    --color-bg-primary: var(--bg-primary);
    --color-bg-secondary: var(--bg-secondary);
    --color-bg-card: var(--bg-card);
    --color-bg-card-hover: var(--bg-card-hover);
    --color-bg-overlay: var(--bg-overlay);
    
    --color-text-primary: var(--text-primary);
    --color-text-secondary: var(--text-secondary);
    --color-text-tertiary: var(--text-muted);
    --color-text-muted: var(--text-muted);
    
    --color-accent: var(--color-gold);
    --color-accent-dark: var(--color-gold-hover);
    --color-accent-light: var(--color-gold-light);
    
    --color-border: var(--border-primary);
    --color-border-light: var(--color-teal-light);
    --color-border-dark: var(--color-teal-dark);
    
    --gradient-text-primary: var(--gradient-heading);
    --gradient-text-secondary: var(--gradient-text);
    --gradient-icon: var(--gradient-button);
    --gradient-card-icon: var(--gradient-button);
    --gradient-button-hover: var(--gradient-button-alt);
}