/*
 * CPOML Design System - CSS Variables
 * "Quiet Luxury" with Glass Morphism
 * Navy Blue + Champagne Gold
 */

:root {
   /* ===========================================
       BRAND COLORS - Navy & Champagne Gold
       =========================================== */

   /* Navy Blue (Primary) - from logo */
   --color-primary: #1E3A5F;
   --color-primary-dark: #152A45;
   --color-primary-light: #2D4A6F;
   --color-primary-rgb: 30, 58, 95;

   /* Champagne Gold (Accent) - from logo */
   --color-accent: #C9A962;
   --color-accent-dark: #B8963F;
   --color-accent-light: #D4BC7D;
   --color-accent-soft: #E8D9B5;
   --color-accent-rgb: 201, 169, 98;

   /* ===========================================
       BACKGROUNDS
       =========================================== */

   --color-bg-body: #FFFFFF;
   --color-bg-section: #FFFFFF;
   --color-bg-section-alt: #FAFAFA;
   --color-bg-card: #FFFFFF;

   /* Header & Footer */
   --color-bg-header: #1E3A5F;
   --color-bg-footer: #152A45;

   /* Glass backgrounds */
   --glass-bg: rgba(255, 255, 255, 0.7);
   --glass-bg-hover: rgba(255, 255, 255, 0.85);
   --glass-bg-dark: rgba(255, 255, 255, 0.08);
   --glass-border: rgba(201, 169, 98, 0.25);
   --glass-border-hover: rgba(201, 169, 98, 0.45);

   /* ===========================================
       TEXT COLORS
       =========================================== */

   --color-text-main: #374151;
   --color-text-heading: #1E3A5F;
   --color-text-muted: #6B7280;
   --color-text-faint: #9CA3AF;
   --color-text-light: #FFFFFF;
   --color-text-on-primary: #FFFFFF;
   --color-text-on-accent: #1E3A5F;

   /* ===========================================
       BORDERS & DIVIDERS
       =========================================== */

   --color-border-invisible: #F5F5F5;
   --color-border-light: #F0F0F0;
   --color-border-medium: #E5E7EB;
   --color-border-accent: #E8D9B5;
   --color-border-gold: #C9A962;
   --color-border-navy: #1E3A5F;

   /* ===========================================
       TYPOGRAPHY
       =========================================== */

   --font-main: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
   --font-display: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

   /* Font Sizes */
   --text-xs: 0.75rem;
   --text-sm: 0.875rem;
   --text-base: 1.05rem;
   --text-lg: 1.125rem;
   --text-xl: 1.25rem;
   --text-2xl: 1.5rem;
   --text-3xl: 1.875rem;
   --text-4xl: 2.5rem;
   --text-5xl: 3rem;

   /* Line heights */
   --line-height-tight: 1.3;
   --line-height-normal: 1.8;
   --line-height-relaxed: 2;

   /* ===========================================
       SPACING & LAYOUT
       =========================================== */

   --container-width: 1000px;
   --container-narrow: 750px;
   --container-wide: 1100px;

   /* Header - Increased for larger logo */
   --header-height: 100px;

   /* Section padding */
   --section-padding: 8rem;
   --section-padding-sm: 5rem;

   /* Spacing scale */
   --spacing-xs: 0.25rem;
   --spacing-sm: 0.5rem;
   --spacing-md: 1rem;
   --spacing-lg: 1.5rem;
   --spacing-xl: 2.5rem;
   --spacing-2xl: 4rem;
   --spacing-3xl: 6rem;

   /* ===========================================
       BORDER RADIUS
       =========================================== */

   --radius-sm: 6px;
   --radius-md: 10px;
   --radius-lg: 16px;
   --radius-xl: 20px;
   --radius-full: 50px;
   --radius-circle: 50%;

   /* ===========================================
       SHADOWS - Glass Morphism
       =========================================== */

   --shadow-glass: 0 4px 24px rgba(30, 58, 95, 0.06);
   --shadow-glass-hover: 0 8px 40px rgba(30, 58, 95, 0.08);
   --shadow-glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.8);
   --shadow-glass-inset-hover: inset 0 1px 0 rgba(255, 255, 255, 0.9);
   --shadow-button-hover: 0 4px 16px rgba(201, 169, 98, 0.25);

   /* ===========================================
       TRANSITIONS
       =========================================== */

   --transition-fast: 150ms ease;
   --transition-base: 300ms ease;
   --transition-slow: 400ms ease;

   /* ===========================================
       Z-INDEX SCALE
       =========================================== */

   --z-dropdown: 50;
   --z-sticky: 80;
   --z-header: 100;
   --z-overlay: 200;
   --z-modal: 300;
   --z-tooltip: 400;

   /* ===========================================
       GRADIENTS
       =========================================== */

   /* Hero gradient - clean navy, no dots */
   --gradient-hero: linear-gradient(160deg, #1E3A5F 0%, #152A45 60%, #1A3355 100%);

   /* Section backgrounds for glass effect */
   --gradient-section-glass: linear-gradient(135deg, #FAFAFA 0%, #F5F7FA 50%, #FAFAFA 100%);
   --gradient-section-elevated: linear-gradient(180deg, #F8F9FB 0%, #FFFFFF 100%);

   /* Gold divider */
   --gradient-divider: linear-gradient(90deg, transparent 0%, #C9A962 30%, #C9A962 70%, transparent 100%);
}