/* ========================================
   CO-VER DESIGN SYSTEM
   CSS Custom Properties
   ======================================== */

:root {
    /* ========================================
       BRAND COLORS
       ======================================== */

    /* Primary Palette - Royal Blue */
    --color-royal-blue: #23408b;
    --color-royal-blue-dark: #1a3068;
    --color-royal-blue-light: #2d4fa3;
    --color-royal-blue-50: rgba(35, 64, 139, 0.05);
    --color-royal-blue-100: rgba(35, 64, 139, 0.1);
    --color-royal-blue-200: rgba(35, 64, 139, 0.2);

    /* Accent Palette - Grass Green (muted for professional look) */
    --color-grass-green: #2d8a4a;
    --color-grass-green-dark: #236b39;
    --color-grass-green-light: #3a9d58;
    --color-grass-green-50: rgba(45, 138, 74, 0.05);
    --color-grass-green-100: rgba(45, 138, 74, 0.1);
    --color-grass-green-200: rgba(45, 138, 74, 0.2);

    /* Secondary - Sky Blue */
    --color-sky-blue: #5379bc;
    --color-sky-blue-light: #6a8fd0;
    --color-sky-blue-dark: #3d5a8f;

    /* Status Colors */
    --color-review-orange: #e67e22;
    --color-review-orange-light: #f39c12;
    --color-review-orange-100: rgba(230, 126, 34, 0.15);
    --color-success: var(--color-grass-green);
    --color-success-100: var(--color-grass-green-100);
    --color-warning: var(--color-review-orange);
    --color-error: #e74c3c;
    --color-error-100: rgba(231, 76, 60, 0.15);

    /* Neutrals */
    --color-slate-grey: #b2b2b2;
    --color-slate-dark: #636e72;
    --color-text-primary: #2d3436;
    --color-text-secondary: #636e72;
    --color-text-muted: #95a5a6;
    --color-text-inverse: #ffffff;

    /* Backgrounds */
    --color-bg-light: #f8f9fa;
    --color-bg-white: #ffffff;
    --color-bg-dark: var(--color-royal-blue-dark);
    --color-bg-overlay: rgba(26, 48, 104, 0.95);

    /* Semantic Aliases */
    --color-primary: var(--color-royal-blue);
    --color-primary-hover: var(--color-royal-blue-dark);
    --color-primary-light: var(--color-royal-blue-light);
    --color-accent: var(--color-grass-green);
    --color-accent-hover: var(--color-grass-green-dark);
    --color-accent-light: var(--color-grass-green-light);

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

    --font-family-primary: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Font Weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Font Sizes - Mobile First with clamp() for fluid scaling */
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-md: 1.125rem;     /* 18px */
    --font-size-lg: 1.25rem;      /* 20px */
    --font-size-xl: 1.5rem;       /* 24px */
    --font-size-2xl: clamp(1.5rem, 4vw, 2rem);        /* 24-32px */
    --font-size-3xl: clamp(1.75rem, 5vw, 2.625rem);   /* 28-42px */
    --font-size-4xl: clamp(2rem, 6vw, 3rem);          /* 32-48px */
    --font-size-5xl: clamp(2.25rem, 7vw, 3.375rem);   /* 36-54px */
    --font-size-hero: clamp(2.5rem, 8vw, 3.5rem);     /* 40-56px */

    /* Line Heights */
    --line-height-tight: 1.1;
    --line-height-snug: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.6;
    --line-height-loose: 1.75;

    /* Letter Spacing */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.05em;
    --letter-spacing-wider: 0.1em;

    /* ========================================
       SPACING SYSTEM (8px base unit)
       ======================================== */

    --space-0: 0;
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px */
    --space-32: 8rem;     /* 128px */

    /* Section Padding */
    --section-padding-y: clamp(3rem, 8vw, 6rem);
    --section-padding-x: var(--space-5);

    /* ========================================
       LAYOUT
       ======================================== */

    --container-max-width: 1200px;
    --container-narrow: 900px;
    --container-tight: 700px;
    --container-padding: var(--space-5);

    /* Grid */
    --grid-gap: var(--space-8);
    --grid-gap-sm: var(--space-4);
    --grid-gap-lg: var(--space-12);

    /* ========================================
       BORDERS & RADIUS
       ======================================== */

    --border-width: 1px;
    --border-width-thick: 2px;
    --border-color: #e9ecef;
    --border-color-dark: #dee2e6;
    --border-color-focus: var(--color-accent);

    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 50px;
    --radius-circle: 50%;

    /* ========================================
       SHADOWS (Layered depth system)
       ======================================== */

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
    --shadow-2xl: 0 25px 80px rgba(0, 0, 0, 0.2);

    /* Colored Shadows (subtle) */
    --shadow-accent: 0 2px 8px rgba(45, 138, 74, 0.15);
    --shadow-accent-hover: 0 4px 12px rgba(45, 138, 74, 0.2);
    --shadow-primary: 0 2px 8px rgba(35, 64, 139, 0.15);
    --shadow-primary-hover: 0 4px 12px rgba(35, 64, 139, 0.2);

    /* Card Shadows (subtle) */
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-card-elevated: 0 4px 16px rgba(0, 0, 0, 0.08);

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

    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
    --transition-slower: 600ms ease;

    /* Specific Transitions */
    --transition-transform: transform var(--transition-base);
    --transition-colors: background-color var(--transition-base),
                         color var(--transition-base),
                         border-color var(--transition-base);
    --transition-shadow: box-shadow var(--transition-base);
    --transition-all: all var(--transition-base);

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

    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-fixed: 1000;
    --z-modal-backdrop: 1500;
    --z-modal: 2000;
    --z-tooltip: 2500;

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

    --gradient-primary: linear-gradient(135deg, var(--color-royal-blue) 0%, var(--color-royal-blue-dark) 100%);
    --gradient-accent: linear-gradient(135deg, var(--color-grass-green) 0%, var(--color-grass-green-light) 100%);
    --gradient-hero: var(--color-royal-blue);
    --gradient-cta: var(--color-royal-blue);

    /* ========================================
       CONSTRUCTION GRAPH PAPER PATTERNS
       ======================================== */

    /* Light background variant (for white/gray sections) */
    --bg-graph-light:
        linear-gradient(to right, rgba(35, 64, 139, 0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(35, 64, 139, 0.06) 1px, transparent 1px),
        linear-gradient(to right, rgba(35, 64, 139, 0.025) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(35, 64, 139, 0.025) 1px, transparent 1px);

    /* Dark background variant (for blue sections) */
    --bg-graph-dark:
        linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(to right, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.015) 1px, transparent 1px);

    /* Grid sizing: 80px major grid, 16px minor grid (5 subdivisions) */
    --bg-graph-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-base: 0ms;
        --transition-slow: 0ms;
        --transition-slower: 0ms;
    }
}