/* MindSpring landing — Vibrant Gamified theme.

   The landing is the one route with its OWN token system: it stored colours as
   bare HSL channels (`--background: 0 0% 0%`) so any of them could be used at
   partial alpha via `hsl(var(--background) / .6)`. The app-wide overlay speaks
   in the legacy hex tokens and cannot reach those, so the landing keeps this
   small file. It redefines the same channels in the vibrant palette, which is
   what flips the page.

   Scope note (2026-09-04): the landing's sections were rebuilt to the approved
   composition and are styled in landing-sections.css under an `lp-` namespace.
   Everything this file used to carry for the old sections — liquid glass, the
   m-btn family, the hero shade, the media-slot mascots, the reveal-words floor
   — went with them. What is left is the token set plus the nav, drawer and
   footer chrome, which are the only surfaces the two share. */

:root {
  /* Ground and ink */
  --background: 43 58% 95%; /* paper  #FAF6EC */
  --foreground: 152 29% 10%; /* ink    #12211A */
  --card: 0 0% 100%; /* white  #FFFFFF */
  --card-foreground: 152 29% 10%;

  /* Primary action is spring green carrying ink text — never white on green. */
  --primary: 144 73% 46%; /* spring #1FCB65 */
  --primary-foreground: 152 29% 10%;

  --secondary: 43 37% 89%; /* sand   #EDE7D8 */
  --secondary-foreground: 152 29% 10%;
  --muted: 43 37% 89%;
  --muted-foreground: 143 6% 39%; /* ink-soft #5E6B63 */

  --accent: 185 63% 46%; /* teal   #2BB3C0 */
  --accent-foreground: 152 29% 10%;

  /* Borders are real ink lines now, not faint greys. */
  --border: 152 29% 10%;
  --input: 152 29% 10%;
  --ring: 152 29% 10%;
  --hero-subtitle: 143 6% 39%;

  /* Correctness keeps its job, at full saturation. The monochrome build
     deliberately desaturated these to sit inside a black-and-white system;
     vibrant has no such constraint. */
  --ok: 144 73% 46%; /* spring */
  --bad: 10 100% 65%; /* coral  #FF6A4D */

  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 24px;
  --radius-xl: 28px;

  --landing-shadow: 4px 4px 0 hsl(var(--foreground));
  --landing-shadow-lg: 6px 6px 0 hsl(var(--foreground));
}

body.mono {
  background-color: hsl(var(--background));
  /* Same bindu dot grid the app uses, so the landing and the product read as
     one surface. Defined here too because the landing speaks in HSL channels. */
  background-image: radial-gradient(
    hsl(43 40% 84%) 1.3px,
    transparent 1.3px
  );
  background-size: 22px 22px;
  color: hsl(var(--foreground));
}

/* base.css paints an ambient wash behind every page. Vibrant's ground is plain
   paper, so it is cancelled — the colour and the hard shadows carry it. */
.mono::before,
.mono::after {
  content: none;
}

.mono h1,
.mono h2,
.mono h3,
.mono h4,
.mono h5 {
  color: hsl(var(--foreground));
  font-family: "Bricolage Grotesque", "Arial Black", sans-serif;
  font-weight: 800;
  letter-spacing: -0.035em;
}

/* ------------------------------------------------- the page's own skin --- */

/* index.html styles its nav inline, and its `.btn-primary` rules are marked
   !important. That button was a green gradient with an outer glow — two of the
   exact tells the project's design rules forbid — so it is overridden in kind
   with the flat, pressable one. */
.btn-primary,
.nav-cta .btn-primary,
.nav-drawer .btn-primary {
  background: hsl(var(--primary)) !important;
  border: 2.5px solid hsl(var(--border)) !important;
  border-radius: 999px !important;
  box-shadow: var(--landing-shadow) !important;
  color: hsl(var(--primary-foreground)) !important;
  font-weight: 800 !important;
}

.btn-primary:hover {
  box-shadow: var(--landing-shadow-lg) !important;
  color: hsl(var(--primary-foreground)) !important;
  filter: brightness(1.06);
  transform: translate(-1px, -1px) !important;
}

/* The press: the control travels onto its own shadow. */
.btn-primary:active {
  box-shadow: 0 0 0 hsl(var(--foreground)) !important;
  transform: translate(4px, 4px) !important;
}

/* The inline block pins the brand mark to the old evergreen hex. */
.brand .mark {
  background: hsl(var(--primary));
  border: 2.5px solid hsl(var(--border));
  border-radius: 12px;
  box-shadow: none;
}

.brand .mark svg {
  stroke: hsl(var(--foreground));
}

.nav-drawer {
  background: hsl(var(--background));
  border-left: 2.5px solid hsl(var(--border));
}

.nav-scrim {
  background: hsl(var(--foreground) / 45%);
}

.mono :focus-visible {
  box-shadow:
    0 0 0 2px hsl(var(--background)),
    0 0 0 5px hsl(var(--foreground));
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover,
  .btn-primary:active {
    transform: none !important;
  }
}