/* ─────────────────────────────────────────────────────────────────────────────
 * BAUHAUS NASA TELEMETRY INTERFACE DESIGN SYSTEM
 * Version 1.1.0 — Monochromatic High-Contrast Functionalism
 * ───────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;0,900;1,400&family=Space+Grotesk:wght@500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Inter:wght@400;500;600&display=swap');

/* --- Design Tokens --- */
:root {
    --bn-bg: #FFFFFF;
    --bn-fg: #000000;
    --bn-tint-subtle: #F4F4F4;
    --bn-tint-mid: #E5E5E5;
    --bn-stroke-muted: #888888;
    --bn-border-light: #E0E0E0;

    --bn-font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --bn-font-tech: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
    --bn-font-mono: 'Space Mono', 'Courier New', monospace;
    --bn-font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Base Body Override when theme is active */
body.theme-bauhaus-nasa {
    background-color: var(--bn-bg) !important;
    color: var(--bn-fg) !important;
    font-family: var(--bn-font-body);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

body.theme-bauhaus-nasa p,
.bn-body-text {
    font-family: var(--bn-font-body) !important;
    font-size: 1rem !important; /* 16px = 1rem */
    font-weight: 400;
    line-height: 1.65;
    color: #333333;
    letter-spacing: -0.01em;
}

/* Headings Override — Playfair Display */
body.theme-bauhaus-nasa h1,
body.theme-bauhaus-nasa h2,
body.theme-bauhaus-nasa h3,
body.theme-bauhaus-nasa h4,
body.theme-bauhaus-nasa h5,
body.theme-bauhaus-nasa h6,
.bn-heading {
    font-family: var(--bn-font-serif) !important;
    color: #000000 !important;
}

/* Pure Monochromatic Scale — strip chromatic colors */
body.theme-bauhaus-nasa a {
    color: var(--bn-fg);
}

body.theme-bauhaus-nasa ::selection {
    background: #000000;
    color: #FFFFFF;
}

/* Global Navigation & Header Override in Bauhaus Mode */
body.theme-bauhaus-nasa .site-header {
    background-color: #FFFFFF !important;
    border-bottom: 2px solid #000000 !important;
    padding: 16px 24px !important;
}

body.theme-bauhaus-nasa .header-logo-text {
    font-family: var(--bn-font-tech) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    font-size: 18px !important;
    color: #000000 !important;
}

body.theme-bauhaus-nasa .header-nav-links a {
    font-family: var(--bn-font-tech) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.15em !important;
    color: #000000 !important;
    padding: 6px 12px !important;
    border-radius: 0px !important;
    transition: background 0.15s ease, color 0.15s ease;
}

body.theme-bauhaus-nasa .header-nav-links a:hover,
body.theme-bauhaus-nasa .header-nav-links a.active {
    background-color: #000000 !important;
    color: #FFFFFF !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * TEXTURES & PATTERNS
 * ───────────────────────────────────────────────────────────────────────────── */

/* Visible Dot-Matrix Grid */
.bn-dot-matrix {
    background-image: radial-gradient(#000000 1.2px, transparent 1.2px);
    background-size: 12px 12px;
}

.bn-dot-matrix-dense {
    background-image: radial-gradient(#000000 1px, transparent 1px);
    background-size: 8px 8px;
}

.bn-dot-matrix-light {
    background-image: radial-gradient(#888888 1px, transparent 1px);
    background-size: 10px 10px;
}

/* Diagonal Slash Hatching */
.bn-hatch-pattern {
    background-image: repeating-linear-gradient(
        45deg,
        #000000 0,
        #000000 1.2px,
        transparent 0,
        transparent 9px
    );
}

.bn-hatch-pattern-light {
    background-image: repeating-linear-gradient(
        45deg,
        #888888 0,
        #888888 1px,
        transparent 0,
        transparent 10px
    );
}

/* Hairline Grid Overlay */
.bn-hairline-grid {
    background-size: 40px 40px;
    background-image: 
        linear-gradient(to right, rgba(0, 0, 0, 0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 1px, transparent 1px);
}

/* Crosshair Markers */
.bn-crosshair {
    position: relative;
}
.bn-crosshair::before,
.bn-crosshair::after {
    content: '';
    position: absolute;
    background-color: #888888;
}
.bn-crosshair::before {
    width: 9px;
    height: 1px;
    top: 50%;
    left: -4px;
}
.bn-crosshair::after {
    width: 1px;
    height: 9px;
    left: 50%;
    top: -4px;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * BIOMORPHIC CELESTIAL SILHOUETTES
 * ───────────────────────────────────────────────────────────────────────────── */

.bn-biomorphic-blob-1 {
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    background-color: #000000;
}

.bn-biomorphic-blob-2 {
    border-radius: 65% 35% 40% 60% / 55% 38% 62% 45%;
    background-color: #000000;
}

.bn-biomorphic-blob-light {
    border-radius: 50% 50% 60% 40% / 40% 60% 40% 60%;
    background-color: #E5E5E5;
}

/* Lunar Grain Texture Overlay */
.bn-lunar-grain {
    position: relative;
    overflow: hidden;
}
.bn-lunar-grain::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.18;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * COMPONENTS & UTILITIES
 * ───────────────────────────────────────────────────────────────────────────── */

/* Primary Utilitarian CTA Button */
.bn-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px 24px;
    background-color: #000000;
    color: #FFFFFF !important;
    font-family: var(--bn-font-tech);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    border: 2px solid #000000;
    border-radius: 0px !important;
    cursor: pointer;
    text-decoration: none !important;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
    box-sizing: border-box;
}

.bn-btn-primary:hover {
    background-color: #FFFFFF;
    color: #000000 !important;
}

.bn-btn-primary:active {
    transform: scale(0.99);
}

/* Secondary Outline Button */
.bn-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    background-color: transparent;
    color: #000000 !important;
    font-family: var(--bn-font-tech);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border: 2px solid #000000;
    border-radius: 0px !important;
    cursor: pointer;
    text-decoration: none !important;
    transition: all 0.15s ease;
}

.bn-btn-outline:hover {
    background-color: #000000;
    color: #FFFFFF !important;
}

/* Utilitarian Square Checkbox */
.bn-checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    user-select: none;
}

.bn-checkbox {
    width: 38px;
    height: 38px;
    min-width: 38px;
    background-color: #000000;
    border-radius: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    transition: background-color 0.15s ease;
}

.bn-checkbox-wrapper input[type="checkbox"] {
    display: none;
}

.bn-checkbox-wrapper input[type="checkbox"]:not(:checked) + .bn-checkbox {
    background-color: #FFFFFF;
    border: 2px solid #000000;
    color: transparent;
}

.bn-checkbox-svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 3;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Floating Circular Media Action Disc */
.bn-action-disc {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: #000000;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.15s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.bn-action-disc:hover {
    transform: scale(1.08);
    background-color: #222222;
}

.bn-action-disc svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Telemetry Micro Badges & Step Counters */
.bn-telemetry-tag {
    font-family: var(--bn-font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--bn-stroke-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.bn-step-indicator {
    font-family: var(--bn-font-mono);
    font-size: 12px;
    font-weight: 700;
    color: #000000;
    letter-spacing: 0.05em;
}

/* Mobile Prototype Card Frames */
.bn-mobile-card {
    width: 100%;
    max-width: 320px;
    min-height: 580px;
    background-color: #FFFFFF;
    border-radius: 32px;
    border: 1px solid #E5E5E5;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 24px;
    box-sizing: border-box;
}

/* Sticky Telemetry Lab Toolbar */
.bn-lab-toolbar {
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: #000000;
    color: #FFFFFF;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--bn-font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    border-bottom: 2px solid #333333;
}

.bn-lab-toolbar a {
    color: #FFFFFF;
    text-decoration: underline;
}

.bn-lab-badge {
    display: inline-block;
    padding: 2px 8px;
    background-color: #FFFFFF;
    color: #000000;
    font-weight: 700;
    border-radius: 0px;
    margin-right: 12px;
}