/* ═══════════════════════════════════════════════
   Midnette Coming Soon — Design Tokens & Styles
   ═══════════════════════════════════════════════ */

/* ── CSS Custom Properties (from Midnette design-tokens.css) ── */
:root {
    /* Brand Colors */
    --mn-navy: #02184b;
    --mn-navy-light: #0a2d6e;
    --mn-navy-lighter: #163d8a;
    --mn-navy-dark: #010f30;
    --mn-navy-rgb: 2, 24, 75;

    --mn-gold: #b5984a;
    --mn-gold-light: #d4ba72;
    --mn-gold-lighter: #e8d9a8;
    --mn-gold-dark: #8f7735;
    --mn-gold-darkest: #6b5928;
    --mn-gold-rgb: 181, 152, 74;

    /* Warm Neutral Grays */
    --mn-gray-50: #faf8f5;
    --mn-gray-100: #f5f2ed;
    --mn-gray-200: #e8e4dd;
    --mn-gray-300: #d5d0c7;
    --mn-gray-400: #b8b2a6;
    --mn-gray-500: #918a7e;
    --mn-gray-600: #6d665c;
    --mn-gray-700: #4f4940;
    --mn-gray-800: #352f28;
    --mn-gray-900: #1f1b16;

    /* Semantic */
    --mn-success: #2d7a4f;
    --mn-warning: #c08b2d;
    --mn-danger: #a93226;
    --mn-info: #1a6b8a;

    /* Surfaces */
    --mn-bg-body: #faf8f5;
    --mn-bg-surface: #ffffff;
    --mn-bg-surface-alt: #f5f2ed;
    --mn-bg-inset: #f0ece5;

    /* Text */
    --mn-text-primary: #1f1b16;
    --mn-text-secondary: #6d665c;
    --mn-text-tertiary: #918a7e;
    --mn-text-inverse: #faf8f5;
    --mn-text-link: #0a2d6e;
    --mn-text-link-hover: #02184b;

    /* Borders */
    --mn-border: #e8e4dd;
    --mn-border-light: #f0ece5;
    --mn-border-strong: #d5d0c7;

    /* Typography */
    --mn-font-body: 'Merriweather', Georgia, 'Times New Roman', serif;
    --mn-font-accent: 'Pirata One', cursive;
    --mn-font-system: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Type Scale */
    --mn-text-xs: 0.75rem;
    --mn-text-sm: 0.875rem;
    --mn-text-base: 1rem;
    --mn-text-lg: 1.125rem;
    --mn-text-xl: 1.25rem;
    --mn-text-2xl: 1.5rem;
    --mn-text-3xl: 1.875rem;
    --mn-text-4xl: 2.25rem;
    --mn-text-5xl: 3rem;
    --mn-text-6xl: 3.75rem;

    /* Line Heights */
    --mn-leading-tight: 1.25;
    --mn-leading-snug: 1.375;
    --mn-leading-normal: 1.65;
    --mn-leading-relaxed: 1.75;

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

    /* Shadows */
    --mn-shadow-sm: 0 1px 3px rgba(31, 27, 22, 0.08), 0 1px 2px rgba(31, 27, 22, 0.06);
    --mn-shadow-md: 0 4px 6px rgba(31, 27, 22, 0.07), 0 2px 4px rgba(31, 27, 22, 0.06);
    --mn-shadow-lg: 0 10px 15px rgba(31, 27, 22, 0.08), 0 4px 6px rgba(31, 27, 22, 0.05);
    --mn-shadow-gold: 0 4px 14px rgba(181, 152, 74, 0.25);

    /* Radius */
    --mn-radius-sm: 0.25rem;
    --mn-radius-md: 0.375rem;
    --mn-radius-lg: 0.5rem;
    --mn-radius-xl: 0.75rem;
    --mn-radius-2xl: 1rem;
    --mn-radius-full: 9999px;

    /* Transitions */
    --mn-transition-fast: 150ms ease;
    --mn-transition-base: 250ms ease;
    --mn-transition-slow: 350ms ease;

    /* Layout */
    --mn-max-width-content: 960px;
    --mn-max-width-wide: 1200px;
    --mn-max-width-prose: 65ch;

    /* Nav */
    --mn-nav-height: 72px;
    --mn-nav-height-compact: 56px;
}


/* ── Reset & Base ── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--mn-font-body);
    font-size: var(--mn-text-base);
    line-height: var(--mn-leading-normal);
    color: var(--mn-text-primary);
    background-color: var(--mn-bg-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--mn-text-link);
    text-decoration: none;
    transition: color var(--mn-transition-fast);
}

a:hover {
    color: var(--mn-text-link-hover);
}

ul {
    list-style: none;
}

h1, h2, h3, h4 {
    line-height: var(--mn-leading-tight);
    color: var(--mn-text-primary);
}


/* ── Utility Classes ── */
.container {
    width: 100%;
    max-width: var(--mn-max-width-wide);
    margin: 0 auto;
    padding: 0 var(--mn-space-6);
}

.heading-brand {
    font-family: var(--mn-font-accent);
    font-weight: 400;
    letter-spacing: 0.02em;
}

.btn {
    display: inline-block;
    padding: var(--mn-space-3) var(--mn-space-8);
    font-family: var(--mn-font-body);
    font-size: var(--mn-text-base);
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--mn-radius-lg);
    cursor: pointer;
    transition: all var(--mn-transition-base);
}

.btn-accent {
    background-color: var(--mn-gold);
    color: #fff;
    border-color: var(--mn-gold);
}

.btn-accent:hover {
    background-color: var(--mn-gold-dark);
    border-color: var(--mn-gold-dark);
    color: #fff;
    box-shadow: var(--mn-shadow-gold);
}

.btn-accent:active {
    background-color: var(--mn-gold-darkest);
    border-color: var(--mn-gold-darkest);
}

.btn-lg {
    padding: var(--mn-space-4) var(--mn-space-10);
    font-size: var(--mn-text-lg);
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--mn-space-2);
    color: var(--mn-gold-dark);
    font-weight: 600;
    font-size: var(--mn-text-sm);
    transition: all var(--mn-transition-fast);
}

.link-arrow:hover {
    color: var(--mn-gold-darkest);
    gap: var(--mn-space-3);
}


/* ═══ 1. NAV BAR ═══ */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: var(--mn-navy);
    height: var(--mn-nav-height);
    display: flex;
    align-items: center;
}

.nav-inner {
    width: 100%;
    max-width: var(--mn-max-width-wide);
    margin: 0 auto;
    padding: 0 var(--mn-space-6);
}

.nav-brand {
    display: inline-block;
}

.nav-logo {
    height: 36px;
    width: auto;
}


/* ═══ 2. HERO ═══ */
.hero {
    background-color: var(--mn-bg-body);
    padding: var(--mn-space-24) 0 var(--mn-space-20);
    text-align: center;
}

.hero-title {
    font-size: var(--mn-text-5xl);
    color: var(--mn-navy);
    margin-bottom: var(--mn-space-6);
    max-width: 14ch;
    margin-left: auto;
    margin-right: auto;
}

.hero-sub {
    font-size: var(--mn-text-lg);
    color: var(--mn-text-secondary);
    max-width: var(--mn-max-width-prose);
    margin: 0 auto var(--mn-space-10);
    line-height: var(--mn-leading-relaxed);
}


/* ═══ SECTIONS (shared) ═══ */
.section {
    padding: var(--mn-space-20) 0;
}

.section-alt {
    background-color: var(--mn-bg-surface);
}

.section-title {
    font-size: var(--mn-text-3xl);
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--mn-space-4);
    color: var(--mn-navy);
}

.section-lead {
    font-size: var(--mn-text-lg);
    color: var(--mn-text-secondary);
    text-align: center;
    max-width: var(--mn-max-width-prose);
    margin: 0 auto var(--mn-space-12);
    line-height: var(--mn-leading-relaxed);
}


/* ═══ CARD GRIDS ═══ */
.card-grid {
    display: grid;
    gap: var(--mn-space-8);
}

.card-grid-3 {
    grid-template-columns: 1fr;
}

.card-grid-2 {
    grid-template-columns: 1fr;
}


/* ═══ 3. FEATURE CARDS (What is Midnette?) ═══ */
.feature-card {
    background: var(--mn-bg-surface);
    border: 1px solid var(--mn-border);
    border-radius: var(--mn-radius-xl);
    padding: var(--mn-space-8);
    text-align: center;
    box-shadow: var(--mn-shadow-sm);
    transition: box-shadow var(--mn-transition-base);
}

.section-alt .feature-card {
    background: var(--mn-bg-body);
}

.feature-card:hover {
    box-shadow: var(--mn-shadow-md);
}

.feature-icon {
    font-size: var(--mn-text-4xl);
    color: var(--mn-gold);
    margin-bottom: var(--mn-space-4);
}

.feature-card h3 {
    font-size: var(--mn-text-xl);
    font-weight: 700;
    margin-bottom: var(--mn-space-3);
    color: var(--mn-navy);
}

.feature-card p {
    font-size: var(--mn-text-sm);
    color: var(--mn-text-secondary);
    line-height: var(--mn-leading-relaxed);
}


/* ═══ 4. VALUE CARDS (Why Authors) ═══ */
.value-card {
    background: var(--mn-bg-surface);
    border: 1px solid var(--mn-border);
    border-radius: var(--mn-radius-xl);
    padding: var(--mn-space-6) var(--mn-space-8);
    box-shadow: var(--mn-shadow-sm);
    transition: box-shadow var(--mn-transition-base);
}

.value-card:hover {
    box-shadow: var(--mn-shadow-md);
}

.value-icon {
    font-size: var(--mn-text-2xl);
    color: var(--mn-gold);
    margin-bottom: var(--mn-space-3);
}

.value-card h3 {
    font-size: var(--mn-text-lg);
    font-weight: 700;
    margin-bottom: var(--mn-space-2);
    color: var(--mn-navy);
}

.value-card p {
    font-size: var(--mn-text-sm);
    color: var(--mn-text-secondary);
    line-height: var(--mn-leading-relaxed);
}


/* ═══ 5. MODERATION ═══ */
.moderation-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mn-space-6);
    margin-bottom: var(--mn-space-10);
}

.moderation-item {
    display: flex;
    gap: var(--mn-space-5);
    padding: var(--mn-space-6);
    background: var(--mn-bg-body);
    border: 1px solid var(--mn-border);
    border-radius: var(--mn-radius-xl);
}

.moderation-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mn-navy);
    color: var(--mn-gold);
    border-radius: var(--mn-radius-lg);
    font-size: var(--mn-text-xl);
}

.moderation-item h3 {
    font-size: var(--mn-text-base);
    font-weight: 700;
    margin-bottom: var(--mn-space-2);
    color: var(--mn-navy);
}

.moderation-item p {
    font-size: var(--mn-text-sm);
    color: var(--mn-text-secondary);
    line-height: var(--mn-leading-relaxed);
}

.moderation-links {
    display: flex;
    flex-direction: column;
    gap: var(--mn-space-3);
    align-items: center;
    margin-bottom: var(--mn-space-8);
}

.moderation-footer-note {
    text-align: center;
    font-size: var(--mn-text-sm);
    color: var(--mn-text-tertiary);
}

.moderation-footer-note a {
    color: var(--mn-text-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}


/* ═══ 6. COMMERCE CARDS ═══ */
.commerce-card {
    background: var(--mn-bg-surface);
    border: 1px solid var(--mn-border);
    border-radius: var(--mn-radius-xl);
    padding: var(--mn-space-6) var(--mn-space-8);
    box-shadow: var(--mn-shadow-sm);
}

.commerce-icon {
    font-size: var(--mn-text-2xl);
    color: var(--mn-gold);
    margin-bottom: var(--mn-space-3);
}

.commerce-card h3 {
    font-size: var(--mn-text-lg);
    font-weight: 700;
    margin-bottom: var(--mn-space-2);
    color: var(--mn-navy);
}

.commerce-card p {
    font-size: var(--mn-text-sm);
    color: var(--mn-text-secondary);
    line-height: var(--mn-leading-relaxed);
}

.commerce-links {
    display: flex;
    flex-direction: column;
    gap: var(--mn-space-3);
    align-items: center;
    margin-top: var(--mn-space-10);
}


/* ═══ 7. FOR READERS ═══ */
.readers-content {
    max-width: var(--mn-max-width-prose);
    margin: 0 auto;
    text-align: center;
}

.readers-content p {
    font-size: var(--mn-text-lg);
    color: var(--mn-text-secondary);
    line-height: var(--mn-leading-relaxed);
    margin-bottom: var(--mn-space-6);
}

.readers-content strong {
    color: var(--mn-navy);
}


/* ═══ 8. CTA SECTION ═══ */
.cta-section {
    background-color: var(--mn-navy);
    text-align: center;
    padding: var(--mn-space-20) 0;
}

.cta-title {
    font-size: var(--mn-text-5xl);
    color: var(--mn-gold);
    margin-bottom: var(--mn-space-6);
}

.cta-sub {
    font-size: var(--mn-text-lg);
    color: var(--mn-text-inverse);
    max-width: var(--mn-max-width-prose);
    margin: 0 auto var(--mn-space-10);
    line-height: var(--mn-leading-relaxed);
    opacity: 0.9;
}

.cta-email {
    margin-top: var(--mn-space-4);
    font-size: var(--mn-text-sm);
    color: var(--mn-gold-light);
    letter-spacing: 0.02em;
}


/* ═══ 9. FOOTER ═══ */
.site-footer {
    background-color: var(--mn-navy-dark);
    color: var(--mn-text-inverse);
    padding: var(--mn-space-16) 0 var(--mn-space-8);
}

.footer-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mn-space-10);
}

.footer-logo {
    height: 28px;
    width: auto;
    margin-bottom: var(--mn-space-3);
    opacity: 0.8;
}

.footer-entity {
    font-size: var(--mn-text-xs);
    color: var(--mn-gray-500);
    margin-bottom: var(--mn-space-1);
}

.footer-copy {
    font-size: var(--mn-text-sm);
    color: var(--mn-gray-400);
}

.footer-links h4 {
    font-size: var(--mn-text-sm);
    font-weight: 700;
    color: var(--mn-gold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--mn-space-4);
}

.footer-links ul {
    display: flex;
    flex-direction: column;
    gap: var(--mn-space-2);
}

.footer-links a {
    font-size: var(--mn-text-sm);
    color: var(--mn-gray-300);
    transition: color var(--mn-transition-fast);
}

.footer-links a:hover {
    color: var(--mn-gold-light);
}

.footer-rta {
    margin-top: var(--mn-space-4);
}

.rta-badge {
    display: inline-block;
    padding: var(--mn-space-1) var(--mn-space-3);
    font-size: var(--mn-text-xs);
    font-weight: 700;
    font-family: var(--mn-font-system);
    color: var(--mn-gray-400);
    border: 1px solid var(--mn-gray-600);
    border-radius: var(--mn-radius-sm);
    letter-spacing: 0.1em;
}


/* ═══ RESPONSIVE ═══ */

/* Tablet (768px+) */
@media (min-width: 768px) {
    .hero {
        padding: var(--mn-space-24) 0;
    }

    .hero-title {
        font-size: var(--mn-text-6xl);
    }

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

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

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

    .footer-inner {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }

    .moderation-links,
    .commerce-links {
        flex-direction: row;
        gap: var(--mn-space-8);
    }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
    .section {
        padding: var(--mn-space-24) 0;
    }

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

/* Small mobile adjustments */
@media (max-width: 480px) {
    .hero-title {
        font-size: var(--mn-text-4xl);
    }

    .cta-title {
        font-size: var(--mn-text-4xl);
    }

    .section-title {
        font-size: var(--mn-text-2xl);
    }

    .btn-lg {
        padding: var(--mn-space-3) var(--mn-space-6);
        font-size: var(--mn-text-base);
    }

    .moderation-item {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
}