/* ================================================================
   LICENSED TAXI - GLOBAL DESIGN SYSTEM - VARIABLES
   ================================================================
   This file contains all design tokens and CSS custom properties
   used throughout the project. Update here to change site-wide
   colors, typography, spacing, and other design elements.
   ================================================================ */

:root {
    /* =====================================================
       COLOR PALETTE - Brand & Company Colors
       ===================================================== */
    --color-primary: #b02519;           /* Primary brand red */
    --color-primary-dark: #8b1d14;      /* Darker red for hover */
    --color-primary-light: #d63821;     /* Lighter red */

    /* Neutrals & Dark Tones */
    --color-dark: #0b1424;              /* Dark navy background */
    --color-dark-secondary: #0f172a;    /* Secondary dark */
    --color-text-primary: #0f172a;      /* Primary text color */
    --color-text-secondary: #5b6070;    /* Muted/secondary text */

    /* Backgrounds */
    --color-bg-primary: #ffffff;        /* Primary background */
    --color-bg-secondary: #f4f6fb;      /* Secondary light background */
    --color-bg-dark: #0b172f;           /* Dark background */
    --color-bg-error: #f8d7da;          /* Error background */

    /* Borders & Dividers */
    --color-border-light: #e4e7ec;      /* Light border */
    --color-border-default: #d0d5e0;    /* Default border */
    --color-border-dark: #c6cfd8;       /* Dark border */

    /* Accent & Status Colors */
    --color-accent: #0f62fe;            /* Accent blue */
    --color-accent-light: #94c6ff;      /* Light accent */
    --color-success: #28a745;           /* Success green */
    --color-error: #dc3545;             /* Error red */
    --color-error-dark: #721c24;        /* Dark error */

    /* Additional Accent Colors */
    --color-accent-teal: #7fe0c2;       /* Teal accent (used in components) */
    --color-accent-light-red: #ffe6e3;  /* Light red background for CTA */

    /* Hero Section Background */
    --hero-bg: linear-gradient(135deg, rgba(4, 4, 20, 0.88), rgba(12, 39, 61, 0.92)), url('/public/assets/images/background2.webp');

    /* =====================================================
       TYPOGRAPHY - Font Families & Sizes
       ===================================================== */
    --font-family-primary: 'Inter', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --font-family-fallback: 'Roboto', 'Helvetica Neue', Arial, sans-serif;

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

    /* Font Sizes */
    --font-size-2xs: 0.75rem;           /* 12px */
    --font-size-xs: 0.85rem;            /* 13.6px */
    --font-size-sm: 0.875rem;           /* 14px */
    --font-size-base: 1rem;             /* 16px */
    --font-size-lg: 1.05rem;            /* 16.8px */
    --font-size-xl: 1.25rem;            /* 20px */
    --font-size-2xl: 1.5rem;            /* 24px */
    --font-size-3xl: 2rem;              /* 32px */
    --font-size-4xl: 2.2rem;            /* 35.2px */
    --font-size-5xl: 3.6rem;            /* 57.6px */
    --font-size-6xl: 100px;             /* 100px */

    /* Line Heights */
    --line-height-tight: 1.1;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.7;

    /* =====================================================
       SPACING - Basic Unit System (8px base)
       ===================================================== */
    --spacing-2xs: 0.25rem;             /* 4px */
    --spacing-xs: 0.5rem;               /* 8px */
    --spacing-sm: 0.75rem;              /* 12px */
    --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 */

    /* =====================================================
       BORDER RADIUS - Roundness Scale
       ===================================================== */
    --radius-xs: 5px;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 18px;
    --radius-2xl: 20px;
    --radius-3xl: 24px;
    --radius-4xl: 32px;
    --radius-5xl: 40px;
    --radius-full: 999px;

    /* =====================================================
       SHADOWS - Elevation System
       ===================================================== */
    --shadow-xs: 0 2px 5px rgba(0, 0, 0, 0.1);
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 20px 35px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 25px 50px rgba(15, 23, 42, 0.15);
    --shadow-xl: 0 25px 60px rgba(15, 23, 42, 0.15);
    --shadow-2xl: 0 35px 60px rgba(0, 0, 0, 0.4);
    --shadow-dark: 0 25px 80px rgba(15, 23, 42, 0.1);
    --shadow-dark-heavy: 0 50px 80px rgba(15, 23, 42, 0.1);

    /* =====================================================
       TRANSITIONS & ANIMATIONS
       ===================================================== */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease-in-out;
    --transition-slow: 0.5s ease;

    /* =====================================================
       BREAKPOINTS - Responsive Design
       ===================================================== */
    --bp-mobile: 480px;
    --bp-tablet: 600px;
    --bp-sm-tablet: 768px;
    --bp-desktop: 1024px;
    --bp-wide: 1200px;
    --bp-ultra: 1440px;

    /* =====================================================
       LAYOUT DIMENSIONS
       ===================================================== */
    --max-width-content: 1200px;
    --max-width-wide: 1240px;
    --header-height: 92px;
    --header-height-mobile: 84px;
    --footer-height: 120px;

    /* Container & Grid */
    --container-padding: 3rem;
    --container-padding-mobile: 1rem;
    --grid-gap: 1.5rem;
    --grid-gap-mobile: 1rem;

    /* =====================================================
       BACKDROP & GLASS MORPHISM
       ===================================================== */
    --backdrop-blur: blur(18px);
    --backdrop-filter: blur(10px);
}

/* ================================================================
   UTILITY CLASSES FOR COMMON USE
   ================================================================ */

/* Text utilities */
.text-primary {
    color: var(--color-text-primary);
}

.text-secondary {
    color: var(--color-text-secondary);
}

.text-accent {
    color: var(--color-accent);
}

.text-primary-brand {
    color: var(--color-primary);
}

/* Background utilities */
.bg-primary {
    background-color: var(--color-bg-primary);
}

.bg-secondary {
    background-color: var(--color-bg-secondary);
}

.bg-dark {
    background-color: var(--color-bg-dark);
    color: #fff;
}

/* Spacing utilities */
.p-sm {
    padding: var(--spacing-sm);
}

.p-md {
    padding: var(--spacing-md);
}

.p-lg {
    padding: var(--spacing-lg);
}

.m-sm {
    margin: var(--spacing-sm);
}

.m-md {
    margin: var(--spacing-md);
}

.m-lg {
    margin: var(--spacing-lg);
}

.gap-sm {
    gap: var(--spacing-sm);
}

.gap-md {
    gap: var(--spacing-md);
}

.gap-lg {
    gap: var(--spacing-lg);
}