/**
 * RHI Website - Brand Colors and Design System CSS Variables
 * 
 * Based on Codex Section 4 - Brand and Design System
 * Uses CSS custom properties (variables) for maintainability
 * Includes Bootstrap 5.3 overrides with RHI brand colors
 */

:root {
    /* =========================================================================
       BRAND COLORS - Codex Section 4 Brand Color Reference
       ========================================================================= */
    
    /* Brand Ink - Near Black */
    --rhi-brand-ink: #0C1115;
    
    /* Conversion Accent - RHI Red (Primary CTA, active states) */
    --rhi-accent-red: #D20A16;
    
    /* Trust - Deep Emerald (Trust sections, secondary CTA) */
    --rhi-trust-emerald: #075E54;
    
    /* Technology - Deep Teal (Technology and dashboards) */
    --rhi-tech-teal: #123B4A;
    
    /* Soft Surface - Mint (Cards and pricing bands) */
    --rhi-soft-mint: #EAF5F0;
    
    /* Background - Warm White (Main canvas) */
    --rhi-bg-white: #FAFAF7;
    
    /* Neutral - Cool Grey (Forms, tables, dividers) */
    --rhi-neutral-grey: #EEF1F3;
    
    /* Premium - Soft Gold (Verified highlights only) */
    --rhi-premium-gold: #D6B55C;
    
    /* Body Text - Charcoal */
    --rhi-body-charcoal: #1A1F24;
    
    /* =========================================================================
       SEMANTIC COLOR MAPPINGS
       ========================================================================= */
    
    --color-primary: var(--rhi-accent-red);           /* #F4212A */
    --color-secondary: var(--rhi-trust-emerald);      /* #075E54 */
    --color-tertiary: var(--rhi-tech-teal);           /* #123B4A */
    --color-success: var(--rhi-trust-emerald);        /* #075E54 */
    --color-warning: #FFA500;
    --color-danger: #FF6B6B;
    --color-info: var(--rhi-tech-teal);               /* #123B4A */
    --color-light: var(--rhi-soft-mint);              /* #EAF5F0 */
    --color-dark: var(--rhi-brand-ink);               /* #0C1115 */
    --color-brand-ink: var(--rhi-brand-ink);
    --color-accent-red: var(--rhi-accent-red);
    --color-trust-emerald: var(--rhi-trust-emerald);
    --color-tech-teal: var(--rhi-tech-teal);
    --color-soft-mint: var(--rhi-soft-mint);
    --color-warm-white: var(--rhi-bg-white);
    --color-cool-grey: var(--rhi-neutral-grey);
    --color-premium-gold: var(--rhi-premium-gold);
    
    /* =========================================================================
       TEXT COLORS
       ========================================================================= */
    
    --text-primary: var(--rhi-body-charcoal);         /* #1A1F24 */
    --text-secondary: #666666;
    --text-muted: #999999;
    --text-light: var(--rhi-brand-ink);               /* #0C1115 - headings */
    
    /* =========================================================================
       BACKGROUND COLORS
       ========================================================================= */
    
    --bg-primary: var(--rhi-bg-white);                /* #FAFAF7 */
    --bg-secondary: var(--rhi-neutral-grey);          /* #EEF1F3 */
    --bg-light: var(--rhi-soft-mint);                 /* #EAF5F0 */
    --bg-dark: var(--rhi-brand-ink);                  /* #0C1115 */
    
    /* =========================================================================
       BORDER COLORS
       ========================================================================= */
    
    --border-color: var(--rhi-neutral-grey);          /* #EEF1F3 */
    --border-dark: #CCCCCC;
    --border-light: #F5F5F5;
    
    /* =========================================================================
       TYPOGRAPHY - Codex Section 4
       Manrope for headings, Inter/system UI for body
       Locally hosted WOFF2, max 2 families/4 weights
       ========================================================================= */
    
    --font-family-heading: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --font-family-mono: 'Courier New', Courier, monospace;
    --font-heading: var(--font-family-heading);
    --font-body: var(--font-family-body);
    
    /* Font Sizes - Modular Scale */
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;     /* 18px */
    --font-size-xl: 1.25rem;      /* 20px */
    --font-size-2xl: 1.5rem;      /* 24px */
    --font-size-3xl: 1.875rem;    /* 30px */
    --font-size-4xl: 2.25rem;     /* 36px */
    --font-size-5xl: 3rem;        /* 48px */
    --font-size-6xl: 3.75rem;     /* 60px */
    
    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    --line-height-loose: 2;
    
    /* =========================================================================
       LAYOUT - Codex Section 4
       Bootstrap 12-column grid; content width 1,200–1,320px
       Long-text width 680–760px
       ========================================================================= */
    
    --max-width-container: 1320px;
    --max-width-content: 1200px;
    --max-width-text: 760px;
    --max-width-narrow-text: 680px;
    
    /* Spacing scale (8px base) */
    --spacing-0: 0;
    --spacing-1: 0.25rem;  /* 4px */
    --spacing-2: 0.5rem;   /* 8px */
    --spacing-3: 0.75rem;  /* 12px */
    --spacing-4: 1rem;     /* 16px */
    --spacing-5: 1.25rem;  /* 20px */
    --spacing-6: 1.5rem;   /* 24px */
    --spacing-7: 1.75rem;  /* 28px */
    --spacing-8: 2rem;     /* 32px */
    --spacing-9: 2.25rem;  /* 36px */
    --spacing-10: 2.5rem;  /* 40px */
    --spacing-12: 3rem;    /* 48px */
    --spacing-16: 4rem;    /* 64px */
    
    /* =========================================================================
       TOUCH TARGETS - Codex Section 4
       44px minimum for mobile touch targets
       ========================================================================= */
    
    --touch-target-min: 44px;
    --button-min-height: 44px;
    --button-min-width: 44px;
    
    /* =========================================================================
       SPACING & GAPS
       ========================================================================= */
    
    --gap-xs: 0.5rem;
    --gap-sm: 1rem;
    --gap-md: 1.5rem;
    --gap-lg: 2rem;
    --gap-xl: 2.5rem;
    --gap-2xl: 3rem;
    
    /* Section padding */
    --section-padding-y-sm: 2rem;
    --section-padding-y-md: 3rem;
    --section-padding-y-lg: 4rem;
    --section-padding-y-xl: 5rem;
    
    /* =========================================================================
       BORDER RADIUS
       ========================================================================= */
    
    --radius-none: 0;
    --radius-sm: 0.25rem;   /* 4px */
    --radius-base: 0.5rem;  /* 8px */
    --radius-lg: 0.75rem;   /* 12px */
    --radius-xl: 1rem;      /* 16px */
    --radius-2xl: 1.5rem;   /* 24px */
    --radius-full: 9999px;
    
    /* =========================================================================
       SHADOWS
       ========================================================================= */
    
    --shadow-none: 0 0 transparent;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* =========================================================================
       TRANSITIONS & ANIMATIONS
       ========================================================================= */
    
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;
    
    --duration-150: 150ms;
    --duration-300: 300ms;
    --duration-500: 500ms;
    --duration-700: 700ms;
    --duration-1000: 1000ms;
    
    /* =========================================================================
       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;
    --z-notification: 1080;
    
    /* =========================================================================
       CONTRAST & WCAG AA COMPLIANCE
       Codex Section 4 - Maintain WCAG AA contrast
       ========================================================================= */
    
    /* Contrast ratios meet WCAG AA (4.5:1 for normal text, 3:1 for large) */
    --contrast-high: 7:1;
    --contrast-normal: 4.5:1;
    --contrast-large: 3:1;
    
    /* =========================================================================
       BREAKPOINTS (Mobile-first)
       Codex Section 6 - Prioritise mobile-first design
       ========================================================================= */
    
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-2xl: 1400px;
}

/* =========================================================================
   PREFERS-REDUCED-MOTION
   Codex Section 4 - Motion must be subtle, respect prefers-reduced-motion
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-base: 0ms;
        --transition-slow: 0ms;
        --duration-150: 0ms;
        --duration-300: 0ms;
        --duration-500: 0ms;
        --duration-700: 0ms;
        --duration-1000: 0ms;
    }
    
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================================
   DARK MODE SUPPORT (Optional - override if theme system exists)
   ========================================================================= */

@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #1a1a1a;
        --bg-secondary: #2d2d2d;
        --text-primary: #e5e5e5;
        --text-secondary: #b0b0b0;
        --border-color: #3d3d3d;
    }
}

/* =========================================================================
   HIGH CONTRAST MODE
   ========================================================================= */

@media (prefers-contrast: more) {
    :root {
        --text-primary: #000000;
        --text-secondary: #333333;
        --bg-primary: #ffffff;
        --bg-secondary: #f0f0f0;
        --border-color: #000000;
        --color-primary: #c00000;
    }
}