/**
 * Vision Research - Unified CSS Variables
 * Use this file as single source of truth for all colors
 */

:root {
    /* ============================================
       PRIMARY COLORS
       ============================================ */
    --vr-primary: #1a6b9a;
    --vr-primary-dark: #145578;
    --vr-primary-light: #e8f4fa;
    --vr-primary-hover: #1d7ab0;

    /* ============================================
       ACCENT COLORS
       ============================================ */
    --vr-green: #22a352;
    --vr-green-light: #dcfce7;
    --vr-green-bg: #f0fdf4;
    --vr-green-border: #86efac;
    --vr-green-dark: #15803d;

    --vr-yellow: #d97706;
    --vr-yellow-light: #fef3c7;
    --vr-yellow-dark: #92400e;

    --vr-orange: #ea580c;
    --vr-orange-light: #ffedd5;

    --vr-red: #dc2626;
    --vr-red-light: #fee2e2;
    --vr-red-border: #fecaca;

    --vr-purple: #7c3aed;
    --vr-purple-dark: #5b21b6;
    --vr-purple-light: #ede9fe;

    /* ============================================
       NEUTRAL COLORS
       ============================================ */
    --vr-text: #1e293b;
    --vr-text-light: #64748b;
    --vr-text-muted: #94a3b8;

    --vr-dark: #0f172a;
    --vr-dark-blue: #1e3a5f;

    /* Hero (dark) */
    --vr-hero-bg: #0f172a;
    --vr-hero-bg-light: #1a2332;
    --vr-accent: #2dd4bf;

    --vr-white: #ffffff;
    --vr-bg: #f8fafc;
    --vr-bg-dark: #f1f5f9;
    --vr-border: #e2e8f0;
    --vr-border-dark: #cbd5e1;

    /* ============================================
       COMPONENT SPECIFIC
       ============================================ */
    /* Header */
    --vr-topbar-bg: linear-gradient(135deg, #1a5276 0%, #2980b9 100%);
    --vr-header-bg: #ffffff;
    --vr-header-border: #e2e8f0;

    /* Icons backgrounds */
    --vr-icon-bg-blue: #dbeafe;
    --vr-icon-bg-green: #dcfce7;
    --vr-icon-bg-yellow: #fef3c7;
    --vr-icon-bg-purple: #ede9fe;
    --vr-icon-bg-orange: #ffedd5;

    /* ============================================
       TYPOGRAPHY
       ============================================ */
    --vr-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --vr-font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;

    /* ============================================
       SPACING
       ============================================ */
    --vr-section-padding: 56px;
    --vr-container-max: 1280px;
    --vr-gap: 24px;

    /* ============================================
       BORDER RADIUS
       ============================================ */
    --vr-radius-sm: 8px;
    --vr-radius-md: 12px;
    --vr-radius-lg: 16px;
    --vr-radius-xl: 24px;
    --vr-radius-full: 9999px;

    /* ============================================
       SHADOWS
       ============================================ */
    --vr-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --vr-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --vr-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
    --vr-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);

    /* ============================================
       TRANSITIONS
       ============================================ */
    --vr-transition: all 0.3s ease;
    --vr-transition-fast: all 0.15s ease;
}