/* ====================================================================
   SKYMETER AVIATION DESIGN SYSTEM
   Professional aviation-inspired color scheme and typography
   ==================================================================== */

/* ====================================================================
   FONT IMPORTS
   Using system fonts per design decision
   ==================================================================== */
/* B612 font import removed - using system fonts instead */

/* DSEG7 Classic - Digital/LCD font for gauge displays */
@font-face {
    font-family: 'DSEG7';
    src: url('/fonts/DSEG7Classic-Regular.woff2') format('woff2'),
         url('/fonts/DSEG7Classic-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DSEG7';
    src: url('/fonts/DSEG7Classic-Bold.woff2') format('woff2'),
         url('/fonts/DSEG7Classic-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ====================================================================
   GLOBAL OVERRIDES
   ==================================================================== */

/* Hide Blazor's default error UI */
#blazor-error-ui {
    display: none !important;
}

/* Remove focus outlines from headings */
h1:focus,
h2:focus,
h3:focus,
h4:focus,
h5:focus,
h6:focus {
    outline: none;
}

/* ====================================================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   Aviation-professional color palette
   ==================================================================== */
:root {
    /* ----------------------------------------------------------------
       SKY/ALTITUDE BLUES - Primary UI colors
       Used for: headers, primary buttons, active states, links
       ---------------------------------------------------------------- */
    --av-sky-50: #f0f9ff;
    --av-sky-100: #e0f2fe;
    --av-sky-200: #bae6fd;
    --av-sky-300: #7dd3fc;
    --av-sky-400: #38bdf8;
    --av-sky-500: #0ea5e9;
    --av-sky-600: #0284c7;
    --av-sky-700: #0369a1;
    --av-sky-800: #075985;
    --av-sky-900: #0c4a6e;
    --av-sky-950: #082f49;

    /* ----------------------------------------------------------------
       INSTRUMENT BLUES - Dark panel backgrounds
       Used for: instrument panels, cockpit backgrounds, dark UI
       ---------------------------------------------------------------- */
    --av-slate-50: #f8fafc;
    --av-slate-100: #f1f5f9;
    --av-slate-200: #e2e8f0;
    --av-slate-300: #cbd5e1;
    --av-slate-400: #94a3b8;
    --av-slate-500: #64748b;
    --av-slate-600: #475569;
    --av-slate-700: #334155;
    --av-slate-800: #1e293b;
    --av-slate-900: #0f172a;
    --av-slate-950: #020617;

    /* ----------------------------------------------------------------
       WARNING AMBER - Caution indicators
       Used for: warnings, caution states, pending actions
       ---------------------------------------------------------------- */
    --av-amber-50: #fffbeb;
    --av-amber-100: #fef3c7;
    --av-amber-200: #fde68a;
    --av-amber-300: #fcd34d;
    --av-amber-400: #fbbf24;
    --av-amber-500: #f59e0b;
    --av-amber-600: #d97706;
    --av-amber-700: #b45309;
    --av-amber-800: #92400e;
    --av-amber-900: #78350f;
    --av-amber-950: #451a03;

    /* ----------------------------------------------------------------
       ALERT RED - Emergency/stall indicators
       Used for: errors, critical alerts, stall warnings, overspeed
       ---------------------------------------------------------------- */
    --av-rose-50: #fff1f2;
    --av-rose-100: #ffe4e6;
    --av-rose-200: #fecdd3;
    --av-rose-300: #fda4af;
    --av-rose-400: #fb7185;
    --av-rose-500: #f43f5e;
    --av-rose-600: #e11d48;
    --av-rose-700: #be123c;
    --av-rose-800: #9f1239;
    --av-rose-900: #881337;
    --av-rose-950: #4c0519;

    /* ----------------------------------------------------------------
       CLIMB GREEN - Positive rate indicators
       Used for: success states, positive climb, good performance
       ---------------------------------------------------------------- */
    --av-emerald-50: #ecfdf5;
    --av-emerald-100: #d1fae5;
    --av-emerald-200: #a7f3d0;
    --av-emerald-300: #6ee7b7;
    --av-emerald-400: #34d399;
    --av-emerald-500: #10b981;
    --av-emerald-600: #059669;
    --av-emerald-700: #047857;
    --av-emerald-800: #065f46;
    --av-emerald-900: #064e3b;
    --av-emerald-950: #022c22;

    /* ----------------------------------------------------------------
       PROFESSIONAL GRAYS - Text and backgrounds
       Used for: body text, backgrounds, borders, subtle UI
       ---------------------------------------------------------------- */
    --av-neutral-50: #fafafa;
    --av-neutral-100: #f5f5f5;
    --av-neutral-200: #e5e5e5;
    --av-neutral-300: #d4d4d4;
    --av-neutral-400: #a3a3a3;
    --av-neutral-500: #737373;
    --av-neutral-600: #525252;
    --av-neutral-700: #404040;
    --av-neutral-800: #262626;
    --av-neutral-900: #171717;
    --av-neutral-950: #0a0a0a;

    /* ----------------------------------------------------------------
       SEMANTIC COLORS - Application-specific
       ---------------------------------------------------------------- */
    --av-primary: var(--av-sky-500);
    --av-primary-hover: var(--av-sky-600);
    --av-primary-active: var(--av-sky-700);

    --av-success: var(--av-emerald-500);
    --av-success-hover: var(--av-emerald-600);

    --av-warning: var(--av-amber-500);
    --av-warning-hover: var(--av-amber-600);

    --av-danger: var(--av-rose-500);
    --av-danger-hover: var(--av-rose-600);

    --av-instrument-bg: var(--av-slate-900);
    --av-instrument-border: var(--av-slate-700);
    --av-instrument-text: var(--av-slate-100);

    /* ----------------------------------------------------------------
       FONT FAMILIES (using system fonts)
       ---------------------------------------------------------------- */
    --font-aviation: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono-aviation: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --font-digital: ui-monospace, 'Courier New', monospace;

    /* ----------------------------------------------------------------
       INSTRUMENT DISPLAY COLORS (cockpit-specific)
       ---------------------------------------------------------------- */
    --av-pfd-sky: #0066cc;
    --av-pfd-ground: #663300;
    --av-pfd-horizon: #ffffff;
    --av-pfd-text: #00ff00;
    --av-pfd-warning: #ffff00;
    --av-pfd-alert: #ff0000;
}

/* Dark mode overrides */
.dark {
    --av-primary: var(--av-sky-400);
    --av-primary-hover: var(--av-sky-500);
    --av-primary-active: var(--av-sky-600);

    --av-success: var(--av-emerald-400);
    --av-warning: var(--av-amber-400);
    --av-danger: var(--av-rose-400);
}

/* ====================================================================
   BASE TYPOGRAPHY STYLES
   Apply B612 as the default font for the application
   ==================================================================== */
html {
    font-family: var(--font-aviation);
}

body {
    font-family: var(--font-aviation);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ====================================================================
   TYPOGRAPHY UTILITY CLASSES
   ==================================================================== */

/* Font Family Classes */
.font-aviation {
    font-family: var(--font-aviation);
}

.font-mono-aviation {
    font-family: var(--font-mono-aviation);
}

.font-digital {
    font-family: var(--font-digital);
    letter-spacing: 0.05em;
}

/* Instrument/Gauge Specific Sizes */
.text-gauge {
    font-family: var(--font-digital);
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: 0.1em;
}

.text-gauge-sm {
    font-family: var(--font-digital);
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0.1em;
}

.text-gauge-lg {
    font-family: var(--font-digital);
    font-size: 2rem;
    line-height: 1;
    letter-spacing: 0.1em;
}

.text-gauge-xl {
    font-family: var(--font-digital);
    font-size: 2.5rem;
    line-height: 1;
    letter-spacing: 0.1em;
}

/* Readout Styles (for altitude, airspeed, heading displays) */
.text-readout {
    font-family: var(--font-mono-aviation);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
}

.text-readout-sm {
    font-family: var(--font-mono-aviation);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
}

.text-readout-lg {
    font-family: var(--font-mono-aviation);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
}

/* Label Styles */
.text-label {
    font-family: var(--font-aviation);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.text-label-lg {
    font-family: var(--font-aviation);
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ====================================================================
   COLOR UTILITY CLASSES
   ==================================================================== */

/* Sky Blues (Primary) */
.text-av-sky-400 { color: var(--av-sky-400); }
.text-av-sky-500 { color: var(--av-sky-500); }
.text-av-sky-600 { color: var(--av-sky-600); }
.bg-av-sky-400 { background-color: var(--av-sky-400); }
.bg-av-sky-500 { background-color: var(--av-sky-500); }
.bg-av-sky-600 { background-color: var(--av-sky-600); }
.border-av-sky-400 { border-color: var(--av-sky-400); }
.border-av-sky-500 { border-color: var(--av-sky-500); }
.border-av-sky-600 { border-color: var(--av-sky-600); }

/* Instrument Slates */
.text-av-slate-700 { color: var(--av-slate-700); }
.text-av-slate-800 { color: var(--av-slate-800); }
.text-av-slate-900 { color: var(--av-slate-900); }
.bg-av-slate-700 { background-color: var(--av-slate-700); }
.bg-av-slate-800 { background-color: var(--av-slate-800); }
.bg-av-slate-900 { background-color: var(--av-slate-900); }
.border-av-slate-700 { border-color: var(--av-slate-700); }
.border-av-slate-800 { border-color: var(--av-slate-800); }

/* Dark mode backgrounds for footer/header */
.dark .dark\:bg-av-slate-900 { background-color: var(--av-slate-900); }
.dark .dark\:bg-av-slate-800 { background-color: var(--av-slate-800); }
.dark .dark\:text-av-neutral-400 { color: var(--av-neutral-400); }
.dark .dark\:text-white { color: white; }
.dark .dark\:border-av-slate-700 { border-color: var(--av-slate-700); }
.dark .dark\:border-av-slate-800 { border-color: var(--av-slate-800); }

/* Warning Ambers */
.text-av-amber-400 { color: var(--av-amber-400); }
.text-av-amber-500 { color: var(--av-amber-500); }
.bg-av-amber-400 { background-color: var(--av-amber-400); }
.bg-av-amber-500 { background-color: var(--av-amber-500); }
.border-av-amber-400 { border-color: var(--av-amber-400); }
.border-av-amber-500 { border-color: var(--av-amber-500); }

/* Alert Reds */
.text-av-rose-500 { color: var(--av-rose-500); }
.text-av-rose-600 { color: var(--av-rose-600); }
.bg-av-rose-500 { background-color: var(--av-rose-500); }
.bg-av-rose-600 { background-color: var(--av-rose-600); }
.border-av-rose-500 { border-color: var(--av-rose-500); }
.border-av-rose-600 { border-color: var(--av-rose-600); }

/* Climb Greens */
.text-av-emerald-400 { color: var(--av-emerald-400); }
.text-av-emerald-500 { color: var(--av-emerald-500); }
.bg-av-emerald-400 { background-color: var(--av-emerald-400); }
.bg-av-emerald-500 { background-color: var(--av-emerald-500); }
.border-av-emerald-400 { border-color: var(--av-emerald-400); }
.border-av-emerald-500 { border-color: var(--av-emerald-500); }

/* Semantic Colors */
.text-av-primary { color: var(--av-primary); }
.bg-av-primary { background-color: var(--av-primary); }
.border-av-primary { border-color: var(--av-primary); }
.hover\:bg-av-primary-hover:hover { background-color: var(--av-primary-hover); }

.text-av-success { color: var(--av-success); }
.bg-av-success { background-color: var(--av-success); }
.border-av-success { border-color: var(--av-success); }

.text-av-warning { color: var(--av-warning); }
.bg-av-warning { background-color: var(--av-warning); }
.border-av-warning { border-color: var(--av-warning); }

.text-av-danger { color: var(--av-danger); }
.bg-av-danger { background-color: var(--av-danger); }
.border-av-danger { border-color: var(--av-danger); }

/* ====================================================================
   COMPONENT STYLES
   ==================================================================== */

/* Instrument Panel Background */
.instrument-panel {
    background-color: var(--av-slate-900);
    border: 2px solid var(--av-slate-700);
    border-radius: 8px;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.5),
        0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Gauge Display */
.gauge-display {
    background: linear-gradient(180deg, var(--av-slate-800) 0%, var(--av-slate-900) 100%);
    border: 2px solid var(--av-slate-700);
    border-radius: 4px;
    padding: 8px 12px;
    font-family: var(--font-digital);
    color: var(--av-pfd-text);
    text-shadow: 0 0 8px var(--av-pfd-text);
}

/* Aviation Button (Primary) */
.btn-aviation {
    background-color: var(--av-sky-600);
    color: white;
    font-family: var(--font-aviation);
    font-weight: 600;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-aviation:hover {
    background-color: var(--av-sky-700);
}

.btn-aviation:active {
    background-color: var(--av-sky-800);
}

/* Aviation Button Variants */
.btn-aviation-success {
    background-color: var(--av-emerald-600);
}

.btn-aviation-success:hover {
    background-color: var(--av-emerald-700);
}

.btn-aviation-warning {
    background-color: var(--av-amber-500);
    color: var(--av-neutral-900);
}

.btn-aviation-warning:hover {
    background-color: var(--av-amber-600);
}

.btn-aviation-danger {
    background-color: var(--av-rose-600);
}

.btn-aviation-danger:hover {
    background-color: var(--av-rose-700);
}

/* Aviation Card */
.card-aviation {
    background-color: white;
    border: 2px solid var(--av-slate-300);
    border-radius: 4px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.card-aviation:hover {
    border-color: var(--av-sky-500);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15);
}

.dark .card-aviation {
    background-color: var(--av-slate-900);
    border-color: var(--av-slate-700);
}

.dark .card-aviation:hover {
    border-color: var(--av-sky-400);
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.1);
}

/* ====================================================================
   ANIMATION CLASSES
   ==================================================================== */

/* Pulse animation for warnings */
@keyframes aviation-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-aviation-pulse {
    animation: aviation-pulse 1s ease-in-out infinite;
}

/* Warning flash for critical alerts */
@keyframes aviation-flash {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}

.animate-aviation-flash {
    animation: aviation-flash 0.5s ease-in-out infinite;
}

/* ====================================================================
   ALTITUDE TAPE GRADIENT
   ==================================================================== */
.altitude-gradient {
    background: linear-gradient(
        to bottom,
        var(--av-sky-300) 0%,
        var(--av-sky-400) 30%,
        var(--av-sky-500) 50%,
        var(--av-sky-600) 70%,
        var(--av-sky-700) 100%
    );
}

/* ====================================================================
   FLIGHT PHASE INDICATORS
   ==================================================================== */
.phase-taxi { color: var(--av-neutral-500); }
.phase-takeoff { color: var(--av-emerald-500); }
.phase-climb { color: var(--av-emerald-400); }
.phase-cruise { color: var(--av-sky-500); }
.phase-descent { color: var(--av-amber-400); }
.phase-approach { color: var(--av-amber-500); }
.phase-landing { color: var(--av-rose-400); }

/* ====================================================================
   ACCESSIBILITY
   ==================================================================== */
@media (prefers-reduced-motion: reduce) {
    .animate-aviation-pulse,
    .animate-aviation-flash {
        animation: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --av-sky-500: #0077cc;
        --av-emerald-500: #00aa66;
        --av-amber-500: #cc8800;
        --av-rose-500: #cc0033;
    }
}