/* Amivra Branding & Design System - CSS Variables */
/* Tech Luxury • Calm Confidence • Intelligent Minimalism */
/* Mercury (Silver/Grey/Blue) + Venus (Rose Gold/Soft Purple) Theme */

:root {
    /* Primary Brand Colors - Mercury (Bright Sky Blue) */
    --color-primary: #5AC8FA;        /* Bright Sky Blue - Primary */
    --color-primary-dark: #3AB8EA;   /* Darker Blue */
    --color-primary-light: #7AD8FF;   /* Lighter Blue */
    --color-primary-hover: #4AC0F5;   /* Hover State */
    
    /* Secondary Colors - Venus (Soft Pastel Pink) */
    --color-secondary: #F4B6C2;       /* Soft Pastel Pink - Secondary */
    --color-secondary-dark: #E8A0B0; /* Darker Pink */
    --color-secondary-light: #F8C6D0; /* Lighter Pink */
    
    /* Accent Colors - Gold */
    --color-accent: #FFD700;         /* Vibrant Yellow/Gold - Accent */
    --color-accent-dark: #E6C200;    /* Darker Gold */
    --color-accent-light: #FFE033;   /* Lighter Gold */
    
    /* Neutral Colors - Mercury (Light Gray) */
    --color-neutral: #E6E6E6;        /* Light Gray - Neutral */
    --color-neutral-dark: #CCCCCC;   /* Darker Gray */
    --color-neutral-light: #F0F0F0;  /* Lighter Gray */
    
    /* Background & Surface Colors - Vibrant Light Theme */
    --color-background: linear-gradient(135deg, #F0F8FF 0%, #E6F3FF 50%, #FFF0F5 100%); /* Soft blue-pink gradient background */
    --color-background-solid: #F0F8FF; /* Fallback solid color */
    --color-surface: #FFFFFF;        /* White - Surface */
    --color-surface-hover: #F8FBFF;  /* Light blue tint - Surface Hover */
    --color-surface-alt: #FFF8F0;    /* Warm white alternative */
    
    /* Text Colors - Dark on Light */
    --color-text-primary: #2C3E50;    /* Dark Slate Blue - Primary Text */
    --color-text-secondary: #5A6C7D; /* Medium Gray - Secondary Text */
    --color-text-tertiary: #8A9BA8;   /* Light Gray - Tertiary Text */
    --color-text-inverse: #FFFFFF;   /* White - Inverse Text (on dark backgrounds) */
    
    /* Border Colors */
    --color-border: #E6E6E6;         /* Light Gray - Border */
    --color-border-hover: #CCCCCC;   /* Medium Gray - Border Hover */
    --color-border-focus: #5AC8FA;   /* Primary Blue - Focus Border */
    
    /* Gradient Colors - Light Theme */
    --gradient-primary: linear-gradient(135deg, #5AC8FA 0%, #3AB8EA 100%);
    --gradient-secondary: linear-gradient(135deg, #F4B6C2 0%, #E8A0B0 100%);
    --gradient-accent: linear-gradient(135deg, #FFD700 0%, #E6C200 100%);
    --gradient-background: linear-gradient(135deg, #FAFAFA 0%, #FFFFFF 100%);
    
    /* Status Colors - Light Theme Compatible */
    --color-success: #10B981;        /* Green */
    --color-success-bg: rgba(16, 185, 129, 0.1);
    --color-success-text: #059669;
    
    --color-warning: #F59E0B;        /* Amber */
    --color-warning-bg: rgba(245, 158, 11, 0.1);
    --color-warning-text: #D97706;
    
    --color-error: #EF4444;           /* Red */
    --color-error-bg: rgba(239, 68, 68, 0.1);
    --color-error-text: #DC2626;
    
    --color-info: #5AC8FA;            /* Sky Blue (matches primary) */
    --color-info-bg: rgba(90, 200, 250, 0.1);
    --color-info-text: #3AB8EA;
    
    /* Numerology Specific Colors - Light Theme Compatible */
    --color-benefic: #10B981;        /* Green */
    --color-benefic-bg: rgba(16, 185, 129, 0.1);
    --color-malefic: #EF4444;         /* Red */
    --color-malefic-bg: rgba(239, 68, 68, 0.1);
    --color-neutral-num: #F59E0B;     /* Amber */
    --color-neutral-num-bg: rgba(245, 158, 11, 0.1);
    
    /* Spacing Scale */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    
    /* Shadows - Light Theme */
    --shadow-sm: 0 1px 2px 0 rgba(44, 62, 80, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(44, 62, 80, 0.1), 0 2px 4px -1px rgba(44, 62, 80, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(44, 62, 80, 0.1), 0 4px 6px -2px rgba(44, 62, 80, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(44, 62, 80, 0.1), 0 10px 10px -5px rgba(44, 62, 80, 0.04);
    
    /* Typography - Poppins Font Family Only */
    --font-family-primary: 'Poppins', sans-serif;
    --font-family-mono: 'Poppins', sans-serif;
    
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 32px;
    
    --font-weight-thin: 100;
    --font-weight-extralight: 200;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
    
    /* Z-index Scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* Force light theme - Tech Luxury aesthetic with vibrant colors */
html, body {
    background: var(--color-background) !important;
    background-color: var(--color-background-solid) !important;
    color: var(--color-text-primary) !important;
    font-family: var(--font-family-primary) !important;
    min-height: 100vh;
}

* {
    color: inherit;
}

/* Ensure all main containers use theme with colorful accents */
.container,
.content-area,
.card,
.panel,
.section {
    background: var(--color-surface) !important;
    color: var(--color-text-primary) !important;
    border: 1px solid rgba(90, 200, 250, 0.2) !important;
    box-shadow: 0 2px 8px rgba(90, 200, 250, 0.1), 0 1px 3px rgba(244, 182, 194, 0.1) !important;
}

.card:hover,
.panel:hover {
    border-color: rgba(90, 200, 250, 0.4) !important;
    box-shadow: 0 4px 12px rgba(90, 200, 250, 0.15), 0 2px 6px rgba(244, 182, 194, 0.15) !important;
}

/* Ensure buttons use theme with vibrant colors */
button,
.btn {
    background: var(--gradient-primary) !important;
    color: var(--color-text-inverse) !important;
    border: 2px solid var(--color-primary) !important;
    font-family: var(--font-family-primary) !important;
    box-shadow: 0 2px 6px rgba(90, 200, 250, 0.3) !important;
    transition: all var(--transition-base) !important;
}

button:hover,
.btn:hover {
    background: var(--gradient-primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(90, 200, 250, 0.4), 0 2px 6px rgba(255, 215, 0, 0.2) !important;
    border-color: var(--color-accent) !important;
}

button:active,
.btn:active {
    transform: translateY(0) !important;
}

.btn-secondary {
    background: var(--gradient-secondary) !important;
    border-color: var(--color-secondary) !important;
    box-shadow: 0 2px 6px rgba(244, 182, 194, 0.3) !important;
}

.btn-secondary:hover {
    box-shadow: 0 4px 12px rgba(244, 182, 194, 0.4) !important;
    border-color: var(--color-accent) !important;
}

.btn-accent {
    background: var(--gradient-accent) !important;
    border-color: var(--color-accent) !important;
    color: var(--color-text-primary) !important;
    box-shadow: 0 2px 6px rgba(255, 215, 0, 0.3) !important;
}

/* Ensure inputs use theme */
input,
select,
textarea {
    background: var(--color-surface) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border) !important;
    font-family: var(--font-family-primary) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-border-focus) !important;
    outline-color: var(--color-border-focus) !important;
}

/* Ensure links use theme */
a {
    color: var(--color-primary) !important;
    font-family: var(--font-family-primary) !important;
}

a:hover {
    color: var(--color-primary-dark) !important;
}

/* Ensure headers use theme */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-primary) !important;
    font-family: var(--font-family-primary) !important;
    font-weight: var(--font-weight-semibold) !important;
}

/* Ensure paragraphs use theme */
p, span, div, li {
    color: var(--color-text-primary) !important;
    font-family: var(--font-family-primary) !important;
}