/* =============================================================
   Resonate Mail — "Love Zone" theme
   Love Zone #FF3C53 · Heather Navy #364362
   ============================================================= */
:root {
    /* Backgrounds */
    --color-bg:             #ffffff;
    --color-surface:        #ffffff;   /* footer bg — white              */

    /* Text */
    --color-text:           #364362;   /* Heather Navy — headings/body   */
    --color-text-muted:     #6b7a99;   /* mid navy (footer only)         */
    --color-text-subtle:    #9ba6bd;   /* light navy for footer copy     */

    /* Borders */
    --color-border:         #d8dce8;   /* soft navy-tinted border        */

    /* Primary button (nav "Create account") — Heather Navy */
    --color-btn-bg:         #364362;
    --color-btn-bg-hover:   #2a3450;
    --color-btn-text:       #ffffff;

    /* Accent */
    --color-accent:         #ff3c53;
    --color-accent-hover:   #e02d43;

    /* Typography (same as original) */
    --font-sans:            'Inter', ui-sans-serif, system-ui;
    --font-mono:            'Courier Prime', 'Courier New', monospace;
}

/* ── Page-level colour remaps ──────────────────────────────────
   Override Tailwind utility classes used in page templates.
   Higher-specificity selectors (html .foo) beat Tailwind's
   dynamically-injected styles without relying on !important
   alone.                                                        */

/* ── Backgrounds ─────────────────────────────────────────── */

/* Dark section divs → Heather Navy */
html div.bg-stone-900              { background-color: #364362; }

/* CTA buttons & links → Heather Navy */
html a.bg-stone-900,
html button.bg-stone-900           { background-color: #364362; }
html a.hover\:bg-stone-800:hover,
html button.hover\:bg-stone-800:hover { background-color: #2a3450; }

/* Light grey sections → pure white */
html .bg-stone-50                  { background-color: #ffffff; }
html .bg-stone-100                 { background-color: #ffffff; }

/* ── Text ────────────────────────────────────────────────── */

/* Near-black text → Heather Navy */
html .text-stone-900               { color: #364362; }

/* Muted text CTAs ("Learn more →", "See more ↓") → Heather Navy */
html .text-stone-500               { color: #364362; }

/* Eyebrow / kicker labels (uppercase tracking-widest) → Love Zone red */
html .uppercase.tracking-widest    { color: #ff3c53; }

/* Typewriter animated word + cursor → Love Zone red */
#typed-word,
#typed-cursor                      { color: #ff3c53; }

/* ── Borders ─────────────────────────────────────────────── */

/* Form input borders → Heather Navy */
html .border-stone-300             { border-color: #364362; }

/* Courier font → Inter (!important beats base.html <style> block) */
.font-courier                      { font-family: var(--font-sans) !important; }

/* ── Nav links → full navy ────────────────────────────────
   Use .site-nav .site-nav-link (specificity 0,2,0) to beat
   the base.html <style> block (.site-nav-link = 0,1,0).   */
.site-nav .site-nav-link           { color: #364362; }
.site-nav .site-nav-link:hover     { color: #1a2235; }