/* API Drone - Design System */

:root {
    /* Primary - Professional Professional Black/Dark */
    --color-primary: #000000;
    --color-primary-light: #1A1A1A;
    --color-primary-dark: #000000;

    /* Accent - Bold Red */
    --color-accent: #E63946;
    /* Professional Red */
    --color-accent-hover: #C32F3B;
    --color-accent-glow: rgba(230, 57, 70, 0.4);

    /* Neutrals */
    --color-white: #FFFFFF;
    --color-gray-50: #F8FAFC;
    --color-gray-100: #F1F5F9;
    --color-gray-200: #E2E8F0;
    --color-gray-300: #CBD5E1;
    --color-gray-400: #94A3B8;
    --color-gray-500: #64748B;
    --color-gray-600: #475569;
    --color-gray-700: #2A2A2A;
    --color-gray-800: #1A1A1A;
    --color-gray-900: #0A0A0A;
    --color-black: #000000;

    /* Text colors for light backgrounds */
    --color-text: #1A1A1A;
    --color-text-muted: #4A4A4A;

    /* Semantic */
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-error: #EF4444;

    /* Font Family */
    --font-primary: 'Plus Jakarta Sans', sans-serif;
    --font-display: 'Outfit', sans-serif;

    /* Spacing Scale */
    --container-max: 1280px;
    --header-height: 80px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    /* Darker shadow for dark theme */
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --shadow-accent: 0 4px 20px rgba(230, 57, 70, 0.3);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-smooth: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset & Base */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    overflow-x: hidden;
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-primary);
    color: var(--color-white);
    line-height: 1.5;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-white);
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-fast);
}

ul {
    list-style: none;
}

/* Container Utility (overriding Bootstrap for custom max-width if needed) */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Utility Classes */
.text-accent {
    color: var(--color-accent) !important;
}

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

.text-muted {
    color: var(--color-text-muted) !important;
}

.text-white {
    color: var(--color-white) !important;
}

.bg-dark {
    background-color: var(--color-primary) !important;
}

.bg-light-dark {
    background-color: var(--color-primary-light) !important;
}

.bg-white {
    background-color: var(--color-white) !important;
}

.bg-gray {
    background-color: var(--color-gray-50) !important;
}

/* Section padding utility */
.section-padding {
    padding: 80px 0;
}

/* Text balance for headings */
h1,
h2,
h3 {
    text-wrap: balance;
}

/* Layout & Text Align Utilities */
.text-center {
    text-align: center !important;
}

.text-start {
    text-align: left !important;
}

.text-end {
    text-align: right !important;
}

/* Spacing Utilities */
.mb-1 {
    margin-bottom: 0.25rem !important;
}

.mb-2 {
    margin-bottom: 0.5rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

.mb-5 {
    margin-bottom: 3rem !important;
}

.mt-1 {
    margin-top: 0.25rem !important;
}

.mt-2 {
    margin-top: 0.5rem !important;
}

.mt-3 {
    margin-top: 1rem !important;
}

.mt-4 {
    margin-top: 1.5rem !important;
}

.mt-5 {
    margin-top: 3rem !important;
}