/* ============================================
   NetPilot v2 — Base Design System
   ============================================ */

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

/* --- Design Tokens --- */
:root {
    /* Colors */
    --np-navy:          #0A1628;
    --np-navy-light:    #111827;
    --np-navy-mid:      #1E293B;
    --np-teal:          #00D4AA;
    --np-teal-glow:     rgba(0, 212, 170, 0.15);
    --np-teal-dark:     #00B894;
    --np-blue:          #3B82F6;
    --np-blue-light:    #60A5FA;
    --np-cyan:          #22D3EE;
    --np-purple:        #8B5CF6;
    --np-white:         #FFFFFF;
    --np-gray-50:       #F8FAFC;
    --np-gray-100:      #F1F5F9;
    --np-gray-200:      #E2E8F0;
    --np-gray-300:      #CBD5E1;
    --np-gray-400:      #94A3B8;
    --np-gray-500:      #64748B;
    --np-gray-600:      #475569;
    --np-gray-700:      #334155;
    --np-gray-800:      #1E293B;
    --np-gray-900:      #0F172A;
    --np-surface:       #111827;
    --np-danger:        #EF4444;
    --np-success:       #10B981;
    --np-warning:       #F59E0B;

    /* Typography */
    --np-font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --np-font-mono:     'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

    /* Font Sizes */
    --np-text-xs:       0.75rem;    /* 12px */
    --np-text-sm:       0.875rem;   /* 14px */
    --np-text-base:     1rem;       /* 16px */
    --np-text-lg:       1.125rem;   /* 18px */
    --np-text-xl:       1.25rem;    /* 20px */
    --np-text-2xl:      1.5rem;     /* 24px */
    --np-text-3xl:      1.875rem;   /* 30px */
    --np-text-4xl:      2.25rem;    /* 36px */
    --np-text-5xl:      3rem;       /* 48px */
    --np-text-6xl:      3.75rem;    /* 60px */
    --np-text-7xl:      4.5rem;     /* 72px */

    /* Font Weights */
    --np-light:         300;
    --np-regular:       400;
    --np-medium:        500;
    --np-semibold:      600;
    --np-bold:          700;
    --np-extrabold:     800;

    /* Spacing */
    --np-space-1:       0.25rem;
    --np-space-2:       0.5rem;
    --np-space-3:       0.75rem;
    --np-space-4:       1rem;
    --np-space-5:       1.25rem;
    --np-space-6:       1.5rem;
    --np-space-8:       2rem;
    --np-space-10:      2.5rem;
    --np-space-12:      3rem;
    --np-space-16:      4rem;
    --np-space-20:      5rem;
    --np-space-24:      6rem;
    --np-space-32:      8rem;

    /* Layout */
    --np-max-width:     1200px;
    --np-max-width-lg:  1400px;
    --np-max-width-sm:  800px;

    /* Border Radius */
    --np-radius-sm:     6px;
    --np-radius:        10px;
    --np-radius-lg:     16px;
    --np-radius-xl:     24px;
    --np-radius-full:   9999px;

    /* Shadows */
    --np-shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.05);
    --np-shadow:        0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --np-shadow-lg:     0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --np-shadow-xl:     0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --np-shadow-glow:   0 0 30px rgba(0, 212, 170, 0.2);
    --np-shadow-card:   0 8px 32px rgba(0, 0, 0, 0.12);

    /* Transitions */
    --np-ease:          cubic-bezier(0.4, 0, 0.2, 1);
    --np-ease-in:       cubic-bezier(0.4, 0, 1, 1);
    --np-ease-out:      cubic-bezier(0, 0, 0.2, 1);
    --np-duration:      0.3s;
    --np-duration-slow: 0.5s;

    /* Z-index layers */
    --np-z-header:      100;
    --np-z-overlay:     200;
    --np-z-modal:       300;
}

/* --- Global Styles --- */
html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.np-theme {
    font-family: var(--np-font);
    font-weight: var(--np-regular);
    line-height: 1.6;
    color: var(--np-gray-800);
    background-color: var(--np-white);
    overflow-x: hidden;
}

/* Override Astra defaults */
body.np-theme .site-content {
    padding: 0;
    margin: 0;
}

body.np-theme .ast-container {
    max-width: 100%;
    padding: 0;
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--np-font);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.np-h1 {
    font-size: var(--np-text-6xl);
    font-weight: var(--np-extrabold);
    letter-spacing: -0.03em;
}

.np-h2 {
    font-size: var(--np-text-5xl);
    font-weight: var(--np-bold);
    letter-spacing: -0.02em;
}

.np-h3 {
    font-size: var(--np-text-4xl);
    font-weight: var(--np-bold);
}

.np-h4 {
    font-size: var(--np-text-2xl);
    font-weight: var(--np-semibold);
}

.np-h5 {
    font-size: var(--np-text-xl);
    font-weight: var(--np-semibold);
}

.np-subtitle {
    font-size: var(--np-text-xl);
    font-weight: var(--np-regular);
    color: var(--np-gray-400);
    line-height: 1.6;
}

.np-body {
    font-size: var(--np-text-base);
    line-height: 1.7;
}

.np-body-lg {
    font-size: var(--np-text-lg);
    line-height: 1.7;
}

.np-label {
    font-size: var(--np-text-sm);
    font-weight: var(--np-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

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

/* --- Layout Utilities --- */
.np-container {
    width: 100%;
    max-width: var(--np-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--np-space-6);
    padding-right: var(--np-space-6);
}

.np-container-lg {
    max-width: var(--np-max-width-lg);
}

.np-container-sm {
    max-width: var(--np-max-width-sm);
}

/* Section spacing */
.np-section {
    padding-top: var(--np-space-24);
    padding-bottom: var(--np-space-24);
}

.np-section-sm {
    padding-top: var(--np-space-16);
    padding-bottom: var(--np-space-16);
}

.np-section-lg {
    padding-top: var(--np-space-32);
    padding-bottom: var(--np-space-32);
}

/* Dark sections */
.np-dark {
    background-color: var(--np-navy);
    color: var(--np-white);
}

.np-dark .np-subtitle {
    color: var(--np-gray-400);
}

.np-dark-mid {
    background-color: var(--np-navy-light);
    color: var(--np-white);
}

/* Light sections */
.np-light {
    background-color: var(--np-gray-50);
    color: var(--np-gray-800);
}

/* Flexbox utilities */
.np-flex {
    display: flex;
}

.np-flex-col {
    display: flex;
    flex-direction: column;
}

.np-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.np-flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.np-flex-wrap {
    flex-wrap: wrap;
}

.np-items-center {
    align-items: center;
}

.np-items-start {
    align-items: flex-start;
}

.np-justify-center {
    justify-content: center;
}

.np-gap-2 { gap: var(--np-space-2); }
.np-gap-3 { gap: var(--np-space-3); }
.np-gap-4 { gap: var(--np-space-4); }
.np-gap-6 { gap: var(--np-space-6); }
.np-gap-8 { gap: var(--np-space-8); }
.np-gap-10 { gap: var(--np-space-10); }
.np-gap-12 { gap: var(--np-space-12); }

/* Grid utilities */
.np-grid {
    display: grid;
    gap: var(--np-space-8);
}

.np-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.np-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.np-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Text alignment */
.np-text-center { text-align: center; }
.np-text-left { text-align: left; }
.np-text-right { text-align: right; }

/* Colors */
.np-text-teal { color: var(--np-teal); }
.np-text-blue { color: var(--np-blue); }
.np-text-muted { color: var(--np-gray-500); }
.np-text-white { color: var(--np-white); }

/* Spacing helpers */
.np-mt-2 { margin-top: var(--np-space-2); }
.np-mt-4 { margin-top: var(--np-space-4); }
.np-mt-6 { margin-top: var(--np-space-6); }
.np-mt-8 { margin-top: var(--np-space-8); }
.np-mt-12 { margin-top: var(--np-space-12); }
.np-mt-16 { margin-top: var(--np-space-16); }
.np-mb-2 { margin-bottom: var(--np-space-2); }
.np-mb-4 { margin-bottom: var(--np-space-4); }
.np-mb-6 { margin-bottom: var(--np-space-6); }
.np-mb-8 { margin-bottom: var(--np-space-8); }
.np-mb-12 { margin-bottom: var(--np-space-12); }
.np-mb-16 { margin-bottom: var(--np-space-16); }

/* Width */
.np-w-full { width: 100%; }
.np-max-w-2xl { max-width: 42rem; }
.np-max-w-3xl { max-width: 48rem; }
.np-max-w-4xl { max-width: 56rem; }

/* Image handling */
img {
    max-width: 100%;
    height: auto;
}

/* Links */
a {
    color: var(--np-teal);
    text-decoration: none;
    transition: color var(--np-duration) var(--np-ease);
}

a:hover {
    color: var(--np-teal-dark);
}

.np-dark a:not(.np-btn) {
    color: var(--np-teal);
}

.np-dark a:not(.np-btn):hover {
    color: var(--np-cyan);
}

/* Selection */
::selection {
    background-color: var(--np-teal);
    color: var(--np-navy);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--np-navy);
}

::-webkit-scrollbar-thumb {
    background: var(--np-gray-600);
    border-radius: var(--np-radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--np-gray-500);
}