/* Shared tokens + page scaffold (reset, palette, background scene, brand)
   Split out of the old single landing.css. Loaded by BOTH index.html and auth.html.
   Load order matters: base.css first. */

/* ============================================================
   MISSION PLANNER — macOS Light Glass Theme
   Shared styles for index.html (landing) and auth.html
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* ---- Light glass palette ---- */
    --bg-base:        #f7f9fc;   /* matches drone_survey_bg_v3.svg base */
    --bg-surface:     rgba(255, 255, 255, 0.55);
    --bg-surface2:    rgba(255, 255, 255, 0.7);
    --bg-card:        rgba(255, 255, 255, 0.5);
    --bg-card2:       rgba(255, 255, 255, 0.72);
    --bg-input:       rgba(255, 255, 255, 0.65);

    --accent:         #2563eb;   /* aligns with the SVG waypoint blue */
    --accent-dim:     #1d4ed8;
    --accent-glow:    rgba(37, 99, 235, 0.12);

    --text-primary:   #0f172a;
    --text-secondary: #475569;
    --text-muted:     #94a3b8;

    --border:         rgba(15, 23, 42, 0.08);
    --border-strong:  rgba(15, 23, 42, 0.12);
    --border-accent:  rgba(37, 99, 235, 0.35);

    --shadow-glass:   0 10px 40px rgba(30, 58, 138, 0.12), 0 2px 8px rgba(15, 23, 42, 0.05);
    --shadow-soft:    0 6px 20px rgba(30, 58, 138, 0.08);

    --radius-md:      10px;
    --radius-lg:      14px;
    --radius-xl:      18px;
}

html { scroll-behavior: smooth; }

/* ---------- Body & Base Layout ---------- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    
    /* Clean light grey base */
    background-color: var(--bg-base); 
    
    /* Barely noticeable, premium dot grid pattern */
    background-image: radial-gradient(rgba(15, 23, 42, 0.116) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* ---------- Background Scene ---------- */
.bg-scene {
    position: absolute; /* Changed from fixed so it scrolls away */
    top: 0;
    left: 0;
    width: 100%;
    height: 110vh; /* Slightly taller than the screen so the fade happens seamlessly */
    z-index: -2;
    pointer-events: none;
    background-color: var(--bg-base);
    
    /* Smoothly fades the bottom edge of the SVG into the body background */
    -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
}

.bg-scene img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Soft tint + edge fade */
.bg-overlay {
    position: absolute; /* Changed from fixed */
    top: 0;
    left: 0;
    width: 100%;
    height: 110vh; /* Match the scene height */
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 32%, rgba(37, 99, 235, 0.05), transparent 60%),
        radial-gradient(ellipse at 50% 100%, rgba(247, 249, 252, 0.85), transparent 70%);
}

/* ---------- Glass primitives ---------- */
.glass {
    background: var(--bg-surface);
    backdrop-filter: blur(26px) saturate(180%);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-glass);
}

/* ---------- Top bar ---------- */
.topbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px clamp(20px, 5vw, 56px);
    z-index: 5;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    letter-spacing: -0.3px;
    font-size: 16px;
}

.brand-text { margin-left: -10px; }

.brand-icon {
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.brand-icon svg,
.brand-icon img{
    width:100%;
    height:100%;
}