/* ============================================================================
   PALETTE CSS - Website with modern and professional design
   Finance-X
   Version: 2.0 (Complete with all variables)
   Author: RNLS
   Relative Path: django_project\static\django_project\css\palette.css
   Description: Single source of truth for all design tokens
 =========================================================================== */

/* ============================================================================
   1. IMPORTS & FONTS
   ============================================================================ */

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

/* ============================================================================
   2. DESIGN TOKENS & CSS VARIABLES
   ============================================================================ */

:root {
    /* === COLOR PALETTE === */
    /* PRIMARY COLORS - Brand Colors */
    --primary-color: rgba(0, 102, 255, 1);        /* #0066FF - Main brand color, primary buttons, links */
    --primary-dark: rgba(0, 82, 204, 1);          /* #0052CC - Hover states, active elements */
    --primary-light: rgba(77, 148, 255, 1);       /* #4D94FF - Light backgrounds, borders */
    --primary-lighter: rgba(128, 179, 255, 1);    /* #80B3FF - Very light backgrounds, gradients */
    
    /* SECONDARY COLORS - Accent/Call to Action */
    --secondary-color: rgba(255, 107, 53, 1);     /* #FF6B35 - Secondary actions, highlights */
    --secondary-dark: rgba(232, 90, 44, 1);       /* #E85A2C */
    --secondary-light: rgba(255, 138, 92, 1);     /* #FF8A5C */
    --secondary-lighter: rgba(255, 224, 212, 1);  /* #FFE0D4- Very light tone for delicate hovers and backgrounds */
    
    /* BACKGROUND COLORS */
    --background-color: rgba(28, 34, 102, 1);       /* #184550 */
    --background-dark: rgba(10, 14, 39, 1);       /* #0A0E27 */
    --background-card: rgba(20, 27, 52, 1);       /* #141B34 */
    --background-light: rgba(30, 39, 64, 1);      /* #1E2740 */
    --background-lighter: rgba(42, 53, 86, 1);    /* #2A3556 */
    
    /* TEXT COLORS */
    --text-primary: rgba(255, 255, 255, 1);       /* #FFFFFF */
    --text-secondary: rgba(184, 197, 214, 1);     /* #B8C5D6 */
    --text-muted: rgba(107, 122, 148, 1);         /* #6B7A94 */
    --text-disabled: rgba(74, 85, 104, 1);        /* #4A5568 */
    
    /* ACCENT COLORS - Status */
    --accent-success: rgba(16, 185, 129, 1);      /* #10B981 */
    --accent-warning: rgba(245, 158, 11, 1);      /* #F59E0B */
    --accent-danger: rgba(239, 68, 68, 1);        /* #EF4444 */
    --accent-info: rgba(59, 130, 246, 1);         /* #3B82F6 */
    
    /* BADGE COLORS */
    --badge-background: var(--background-lighter);
    --badge-border: rgba(0, 217, 163, 0.3);
    
    /* === GRADIENTS === */
    --gradient-primary: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-lighter) 100%);
    --gradient-primary-light: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);
    --gradient-background-card: linear-gradient(135deg, rgba(21, 27, 59, 0.9) 0%, rgba(21, 27, 59, 0.7) 100%);
    --gradient-background-card-before: linear-gradient(135deg, rgba(0, 217, 163, 0.05) 0%, rgba(36, 219, 173, 0.05) 100%);
    --gradient-dark: linear-gradient(180deg, rgba(10, 14, 39, 1) 0%, rgba(20, 27, 52, 1) 100%);
    
    /* === SHADOWS === */
    --shadow-xs: 0 1px 2px rgba(0, 102, 255, 0.05);
    --shadow-sm: 0 2px 8px rgba(0, 102, 255, 0.1);
    --shadow-md: 0 4px 16px rgba(0, 102, 255, 0.15);
    --shadow-lg: 0 8px 32px rgba(0, 102, 255, 0.2);
    --shadow-xl: 0 16px 48px rgba(0, 102, 255, 0.25);
    --shadow-2xl: 0 24px 64px rgba(0, 102, 255, 0.3);
    --shadow-glow-primary: 0 0 10px var(--primary-dark);
    --shadow-glow-secondary: 0 0 20px rgba(255, 107, 53, 0.3);
    
    /* === BORDERS === */
    --border-width-thin: 1px;
    --border-width: 2px;
    --border-width-thick: 3px;
    --border-color: rgba(255, 255, 255, 0.08);
    --border-color-hover: rgba(0, 102, 255, 0.3);
    --border-color-active: var(--primary-color);
    --border-color-focus: var(--primary-light);
    
    /* === TYPOGRAPHY - Font Families === */
    --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'Fira Code', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
    --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    
    /* === TYPOGRAPHY - Font Sizes (in rem) === */
    --font-size-4xs: 0.5rem;     /* 8px  - Ultra small - for tiny badges */
    --font-size-3xs: 0.5625rem;  /* 9px  - Extra extra small */
    --font-size-2xs: 0.625rem;   /* 10px - Extra small - for compact metadata */
    --font-size-xs: 0.75rem;     /* 12px - Small - standard for secondary labels */
    --font-size-sm: 0.875rem;    /* 14px - Medium-small - small body text */
    --font-size-base: 1rem;       /* 16px - Base - main body text */
    --font-size-lg: 1.125rem;    /* 18px - Medium-large - subheadings */
    --font-size-xl: 1.25rem;     /* 20px - Large - small titles */
    --font-size-2xl: 1.5rem;     /* 24px - Extra large - medium titles */
    --font-size-3xl: 1.875rem;   /* 30px - Double extra large - large titles */
    --font-size-4xl: 2.25rem;    /* 36px - Triple extra large - hero titles */
    --font-size-5xl: 3rem;       /* 48px - Quadruple extra large - large hero titles */
    
    /* === TYPOGRAPHY - Font Weights === */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    /* === TYPOGRAPHY - Line Heights === */
    --line-height-tight: 1.2;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.7;
    --line-height-loose: 1.8;
    
    /* === TYPOGRAPHY - Letter Spacing === */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.02em;
    --letter-spacing-wider: 0.05em;
    
    /* === SPACING SCALE (in rem) === */
    --spacing-4xs: 0.0625rem;  /* 1px */
    --spacing-2xs: 0.125rem;   /* 2px */
    --spacing-xs:  0.25rem;    /* 4px */
    --spacing-sm:  0.5rem;     /* 8px */
    --spacing-md:  1rem;       /* 16px */
    --spacing-lg:  1.5rem;     /* 24px */
    --spacing-xl:  2rem;       /* 32px */
    --spacing-2xl: 3rem;       /* 48px */
    --spacing-3xl: 4rem;       /* 64px */
    --spacing-4xl: 5rem;       /* 80px */
    --spacing-5xl: 6rem;       /* 96px */
    
    /* === BORDER RADIUS === */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
    
    /* === COMPONENT SIZES === */

 
    --size-icon-2xs: 1rem;      /* 16px */
    --size-icon-xs: 1.5rem;     /* 24px */
    --size-icon-sm: 2rem;       /* 32px */
    --size-icon-md: 2.5rem;     /* 40px */
    --size-icon-lg: 3rem;       /* 48px */
    --size-icon-xl: 3.5rem;     /* 56px */
    
    --size-avatar-sm: 2rem;     /* 32px */
    --size-avatar-md: 2.5rem;   /* 40px */
    --size-avatar-lg: 3rem;     /* 48px */
    --size-avatar-xl: 3.5rem;   /* 56px */
    
    /* === TRANSITIONS === */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slower: 700ms cubic-bezier(0.4, 0, 0.2, 1);
    
    /* === ANIMATIONS & EASING === */
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* === FOCUS RINGS === */
    --focus-ring-color: var(--primary-light);
    --focus-ring-width: 3px;
    --focus-ring-width-thick: 4px;
    --focus-ring-offset: 2px;
    --focus-ring: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
    --focus-ring-glow: 0 0 0 var(--focus-ring-width) rgba(0, 217, 163, 0.15);
    
    /* === OPACITY === */
    --opacity-disabled: 0.5;
    --opacity-hover: 0.8;
    --opacity-overlay: 0.7;
    --opacity-light: 0.1;
    --opacity-medium: 0.3;
    --opacity-heavy: 0.6;
    
    /* === 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;
    
    /* === RESPONSIVE BREAKPOINTS (reference only - use raw pixels in @media) === */
    --breakpoint-sm: 576px;   /* Mobile landscape */
    --breakpoint-md: 768px;   /* Tablet */
    --breakpoint-lg: 992px;   /* Desktop */
    --breakpoint-xl: 1200px;  /* Large desktop */
    --breakpoint-2xl: 1400px; /* Extra large desktop */
    
    /* === CONTAINER MAX-WIDTHS === */
    --container-sm: 540px;
    --container-md: 720px;
    --container-lg: 960px;
    --container-xl: 1140px;
    --container-2xl: 1320px;
    
    /* === LAYOUT VARIABLES === */
    --header-height: 4.375rem;        /* 70px */
    --header-height-mobile: 3.75rem;  /* 60px */
    --sidebar-width: 17.5rem;         /* 280px */
    --sidebar-collapsed-width: 4.375rem; /* 70px */
    --container-padding: var(--spacing-xl);
    --container-padding-mobile: var(--spacing-lg);
    
    /* === GRID GAPS === */
    --grid-gap-sm: var(--spacing-md);
    --grid-gap-md: var(--spacing-lg);
    --grid-gap-lg: var(--spacing-xl);
    
    /* === BUTTON VARIABLES === */
    --btn-height-sm: 2rem;        /* 32px */
    --btn-height-md: 2.5rem;      /* 40px */
    --btn-height-lg: 3rem;        /* 48px */
    --btn-padding-sm: 0.5rem 1rem;    /* 8px 16px */
    --btn-padding-md: 0.75rem 1.5rem; /* 12px 24px */
    --btn-padding-xl: 1rem 2rem;      /* 16px 32px */
    --btn-padding-lg: 1.125rem 2.25rem; /* 18px 36px */
    --btn-padding-x: var(--spacing-lg);
    
    /* === CARD VARIABLES === */
    --card-padding: var(--spacing-xl);
    --card-padding-sm: var(--spacing-lg);
    --card-border-radius: var(--radius-2xl);
    --card-hover-transform: translateY(-0.5rem);
    
    /* === FORM VARIABLES === */
    --input-height: 2.5rem;           /* 40px */
    --input-padding-sm: 0.625rem 1rem;   /* 10px 16px */
    --input-padding: 0.875rem 1.125rem; /* 14px 18px */
    --input-padding-lg: 1rem 1.5rem;     /* 16px 24px */
    --input-border-color: var(--border-color);
    --input-focus-border: var(--primary-color);
    --input-bg: rgba(10, 14, 39, 0.6);
    --input-bg-focus: rgba(10, 14, 39, 0.8);
}

/* === PREFERS-REDUCED-MOTION SUPPORT === */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-base: 0ms;
        --transition-slow: 0ms;
        --transition-slower: 0ms;
    }
    
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* === HIGH CONTRAST SUPPORT === */
@media (prefers-contrast: high) {
    :root {
        --primary-color: #0066cc;
        --primary-dark: #004999;
        --text-primary: #ffffff;
        --text-secondary: #f0f0f0;
        --background-color: #000000;
        --background-dark: #000000;
        --border-color: #ffffff;
        --border-width: 2px;
        --focus-ring-width: 4px;
    }
}

/* ============================================================================
   END OF PALETTE CSS
 =========================================================================== */