@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap");

/* ============================================================
   flat.css — Rant Zone monochrome theme (2026 refresh).

   Same calm near-black system as YB Zone, but the single brand
   accent here is ROSE (Rant's identity) instead of indigo.
   Space Grotesk headings, Inter body, hairline-bordered cards
   with a gentle hover lift.

   Loaded LAST on rant.zone index / features / terms so it wins
   the cascade over each page's own <style>.
   ============================================================ */

:root {
  --bg: #08070a !important;
  --void: #08070a !important;
  --surface: #100e13 !important;
  --bg-card: #100e13 !important;
  --bg-elevated: #17141b !important;
  --text: #ececf1 !important;
  --text-bright: #ffffff !important;
  --muted: #9a9aa6 !important;
  --dim: #5c5c66 !important;

  /* Brand — rose, used minimally */
  --brand: #f43f5e !important;
  --brand-2: #e11d48 !important;
  --brand-dim: rgba(244, 63, 94, 0.14) !important;

  --accent: #f43f5e !important;
  --accent-glow: rgba(244, 63, 94, 0.16) !important;
  --cyan: #f43f5e !important;

  --border: rgba(255, 255, 255, 0.07) !important;
  --border-hover: rgba(255, 255, 255, 0.14) !important;
  --line: rgba(255, 255, 255, 0.07) !important;
  --radius: 14px !important;
}

body {
  font-family: "Inter", system-ui, sans-serif !important;
  background:
    radial-gradient(circle at 50% -10%, rgba(244, 63, 94, 0.07) 0%, transparent 48%),
    linear-gradient(180deg, #08070a 0%, #060509 100%) !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased;
}

/* Recolour the top glow softly (index) */
.glow { background: radial-gradient(ellipse, rgba(244, 63, 94, 0.14) 0%, transparent 70%) !important; }
.noise { display: none !important; }

/* ---- Typography ---- */
h1, h2, h3 { font-family: "Space Grotesk", "Inter", sans-serif !important; }
h1 { color: var(--text-bright) !important; letter-spacing: -0.03em !important; font-weight: 700 !important; }
.lead, .lede, .sub, .hint, .tagline, p, li { color: var(--muted) !important; }
strong { color: var(--text) !important; }
a { color: var(--brand) !important; text-decoration: none; }
a:hover { color: #ff6b83 !important; }
.logo { color: var(--brand) !important; }
.tagline { color: var(--brand) !important; }
code { background: rgba(255, 255, 255, 0.06) !important; color: var(--text) !important; border-radius: 5px !important; }

/* ---- Section headings ---- */
section h2, .prose h2, .content h2 {
  font-family: "Space Grotesk", sans-serif !important;
  font-size: 1.3rem !important; font-weight: 600 !important;
  color: var(--text-bright) !important;
  padding-bottom: 0.5rem !important; margin: 0 0 0.9rem !important;
  border-bottom: 1px solid var(--border) !important;
  text-transform: none !important; letter-spacing: -0.01em !important;
}
section h3, .panel h3, .scroll-card h3 {
  color: var(--brand) !important; font-family: "Space Grotesk", sans-serif !important;
  font-weight: 600 !important;
}

/* ---- Cards ---- */
.site-card, .panel, .scroll-card, .toc, .card, .feature-card, .legal-note {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transition: transform 0.45s cubic-bezier(0.4,0,0.2,1), border-color 0.45s ease, box-shadow 0.45s ease !important;
}
.site-card, .panel, .feature-card { padding: 1.6rem 1.5rem !important; }
.toc { padding: 1.25rem 1.4rem !important; }
.site-card:hover, .panel:hover, .scroll-card:hover, .feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-hover) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45) !important;
}

/* ---- Table of contents ---- */
.toc h2 { border: none !important; padding: 0 !important; font-family: "Space Grotesk", sans-serif !important; font-size: 0.7rem !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--muted) !important; }
.toc a { color: var(--muted) !important; }
.toc a:hover { color: var(--brand) !important; }

/* ---- Callouts / warnings ---- */
.callout { margin: 1rem 0 !important; padding: 0.7rem 0 0.7rem 1rem !important; border: none !important; border-left: 3px solid var(--brand) !important; border-radius: 0 !important; background: linear-gradient(90deg, var(--brand-dim), transparent 70%) !important; color: var(--muted) !important; }
.callout strong { color: var(--text) !important; }
.warn { margin: 1rem 0 1.25rem !important; padding: 0.7rem 0 0.7rem 1rem !important; border: none !important; border-left: 3px solid var(--brand) !important; border-radius: 0 !important; background: linear-gradient(90deg, var(--brand-dim), transparent 70%) !important; color: #f6c9d2 !important; }

/* ---- Buttons ---- */
.btn { border-radius: 999px !important; font-family: "Inter", sans-serif !important; box-shadow: none !important; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), background 0.3s, border-color 0.3s, filter 0.2s !important; }
.btn-solid { background: linear-gradient(135deg, #f43f5e, #e11d48) !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.08) !important; }
.btn-solid:hover { transform: translateY(-2px); filter: brightness(1.08); opacity: 1 !important; }
.btn-line { background: rgba(255,255,255,0.03) !important; border: 1px solid var(--border) !important; color: var(--text) !important; }
.btn-line:hover { transform: translateY(-2px); border-color: var(--border-hover) !important; color: var(--text-bright) !important; opacity: 1 !important; }

/* ---- Scroll strip scrollbar ---- */
.scroll-strip { scrollbar-color: var(--brand) var(--bg-card) !important; }
.scroll-strip::-webkit-scrollbar-thumb { background: var(--brand) !important; }

/* ---- Tables ---- */
table { background: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; }
th, td { border-bottom: 1px solid var(--border) !important; }
th { background: none !important; color: var(--text-bright) !important; font-family: "Space Grotesk", sans-serif !important; }

/* ---- Footer ---- */
footer { border-top: 1px solid var(--border) !important; color: var(--muted) !important; }
footer a { color: var(--brand) !important; }