/* ============================================================
   Theme 2 — "Monochrome Editorial" (base framework overrides)
   Builds on theme1's framework, then restyles the look:
   - Black top nav, white minimal surfaces
   - Neutral (no blue gradients), high-contrast typography
   - Flat cards, subtle borders, generous whitespace
   ============================================================ */
@import url("/static/themes/theme1/custom.css");

:root {
    /* Neutral palette that maps the blue "primary" onto near-black. */
    --primary-50:  #f6f6f6;
    --primary-100: #ececec;
    --primary-200: #d6d6d6;
    --primary-300: #b0b0b0;
    --primary-400: #6b6b6b;
    --primary-500: #000000;
    --primary-600: #000000;
    --primary-700: #171717;
    --primary-800: #000000;
    --primary-900: #000000;
}

/* Flat, bright page background (no diagonal gradient). */
body {
    background: #ffffff;
    color: #111111;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ===== Top navigation: solid black bar ===== */
.navbar {
    background: #000000;
    border-bottom: none;
    box-shadow: none;
    backdrop-filter: none;
}
.nav-link { color: #e5e5e5; }
.nav-link:hover { color: #ffffff; background-color: rgba(255,255,255,0.08); }
.logo-text {
    background: none;
    -webkit-text-fill-color: #ffffff;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* ===== Buttons: pill, solid black / bordered ===== */
.btn { border-radius: 9999px; font-weight: 600; }
.btn-primary {
    background: #000000;
    color: #ffffff;
    box-shadow: none;
}
.btn-primary:hover:not(:disabled) {
    background: #333333;
    transform: none;
    box-shadow: none;
}
.btn-secondary {
    background: #ffffff;
    color: #000000;
    border: 1px solid #d6d6d6;
}
.btn-secondary:hover:not(:disabled) {
    background: #f6f6f6;
    border-color: #b0b0b0;
    transform: none;
}

/* ===== Forms: squarer inputs, black focus ring ===== */
.form-input, input, textarea, select {
    border-radius: 8px;
}
.form-input:focus, input:focus, textarea:focus, select:focus {
    border-color: #000000;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
    transform: none;
}

/* ===== Cards: flat with hairline border ===== */
.card {
    border: 1px solid #ececec;
    box-shadow: none;
    border-radius: 12px;
}
.card:hover { transform: none; box-shadow: 0 6px 20px rgba(0,0,0,0.06); }

/* ===== Hero: light gray band, centered dark heading ===== */
.hero {
    background: #f2f2f2;
    padding: 4rem 0 5rem;
}
.hero::before { background: none; }
.hero h1 { color: #111111; font-weight: 800; letter-spacing: -0.02em; }
.hero .highlight {
    background: none;
    -webkit-text-fill-color: #111111;
    color: #111111;
}

/* ===== Footer: solid black, multi-column ===== */
.footer {
    background: #000000;
    color: #ffffff;
}
.footer-logo .logo-text { color: #ffffff; -webkit-text-fill-color: #ffffff; }
.footer-link:hover { color: #ffffff; }
.social-link { background: #1a1a1a; color: #cfcfcf; }
.social-link:hover { background: #ffffff; color: #000000; }
.footer-bottom { border-top-color: #262626; }