/* ============================ LIGHT PALETTE ==============================
   These builds theme through :root HSL variables - every background, text and
   border utility resolves to hsl(var(--x)). Redefining the variables converts
   the whole site coherently. The brand hue (--primary) is deliberately
   unchanged so the sites stay distinct from one another.
   NB: no asterisk-slash sequences in this comment - writing utility patterns
   like bg-<star>/text-<star> closes the comment early and corrupts the rule
   that follows, which silently disabled this entire block once already. */
:root, .dark {
  --background: 210 20% 99%;
  --foreground: 222 47% 11%;

  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;
  --popover: 0 0% 100%;
  --popover-foreground: 222 47% 11%;

  --primary: 175 77% 25%;
  --primary-foreground: 0 0% 100%;

  --secondary: 210 17% 95%;
  --secondary-foreground: 222 40% 16%;
  --muted: 210 16% 95%;
  --muted-foreground: 215 16% 47%;
  --accent: 167 79% 89%;
  --accent-foreground: 222 40% 16%;

  --border: 218 25% 92%;
  --input: 218 25% 92%;
  --ring: 175 77% 25%;

  --destructive: 0 72% 45%;
  --destructive-foreground: 0 0% 100%;
}

/* Surfaces the variables cannot reach: hard-coded dark washes, dark gradient
   heroes and glass panels built for a dark canvas. */
body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }

.glass-card, [class*="glass"] {
  background: hsl(var(--card)) !important;
  backdrop-filter: none !important;
  border: 1px solid hsl(var(--border)) !important;
  color: hsl(var(--card-foreground)) !important;
}

/* dark hero overlays: lighten the scrim so text reads on the light canvas */
[class*="from-background"], [class*="via-background"], [class*="to-background"] {
  --tw-gradient-from: hsl(var(--background)) !important;
  --tw-gradient-to: hsl(var(--background) / 0) !important;
}
[class*="bg-black"], [class*="bg-slate-9"], [class*="bg-gray-9"], [class*="bg-zinc-9"],
[class*="bg-neutral-9"], [class*="bg-\[\#0"] {
  background-color: hsl(var(--muted)) !important;
  color: hsl(var(--foreground)) !important;
}
/* Recolour white text ONLY where it now sits on a light surface. Anything that
   is itself a filled control, or lives inside one, keeps white - otherwise the
   primary CTAs ghost out, which is exactly what happened on the first attempt. */
/* Default: white text becomes dark, because the canvas is now light. This has
   to include plain <a> and <button> - excluding them wholesale left the nav
   links and the hero badge white-on-white. */
[class*="text-white"], [class*="text-gray-1"], [class*="text-gray-2"],
[class*="text-slate-1"], [class*="text-slate-2"], [class*="text-zinc-1"] {
  color: hsl(var(--foreground)) !important;
}
/* Exception, applied after: anything sitting ON a filled brand surface keeps
   white, and so does everything inside it. */
[class*="bg-primary"], [class*="bg-gradient"],
a[class*="bg-primary"], button[class*="bg-primary"],
a[class*="bg-gradient"], button[class*="bg-gradient"],
[class*="bg-primary"] *, [class*="bg-gradient"] * {
  color: #fff !important;
}
/* header/nav links read as secondary text on light */
header a:not([class*="bg-"]), nav a:not([class*="bg-"]) { color: hsl(var(--foreground)) !important; }
header a:not([class*="bg-"]):hover, nav a:not([class*="bg-"]):hover { color: hsl(var(--primary)) !important; }

/* A tinted background (bg-primary/10) is a LIGHT surface, not a brand fill -
   forcing white on it left the hero badge, the outline CTA and the media-card
   caption invisible. Opacity-modified backgrounds take dark text. */
[class*="bg-primary/"], [class*="bg-white/"], [class*="bg-black/"],
[class*="bg-primary/"] *, [class*="bg-white/"] * {
  color: hsl(var(--foreground)) !important;
}
[class*="bg-primary/"] { background-color: hsl(var(--primary) / .10) !important; }

/* Header CTAs. Anything in the header that is NOT a solid brand fill becomes
   brand-on-white with a brand border - matching on "border" alone missed the
   outline button, which shadcn renders via a variant class. */
header a:not([class*="bg-primary"]):not([class*="bg-gradient"]),
header button:not([class*="bg-primary"]):not([class*="bg-gradient"]) {
  color: hsl(var(--foreground)) !important;
}
header a[class*="border"], header button[class*="border"],
header a[class*="outline"], header button[class*="outline"],
header a[class*="ghost"], header button[class*="ghost"],
header [class*="rounded"]:not([class*="bg-primary"]):not([class*="bg-gradient"]) > a,
header a[class*="rounded"]:not([class*="bg-primary"]):not([class*="bg-gradient"]) {
  color: hsl(var(--primary)) !important;
  border: 1px solid hsl(var(--primary)) !important;
  background-color: hsl(var(--card)) !important;
}
header a[class*="bg-primary"], header button[class*="bg-primary"],
header a[class*="bg-gradient"], header button[class*="bg-gradient"] {
  color: #fff !important;
  border-color: transparent !important;
}

/* captions sitting over the faded hero media */
section [class*="absolute"] [class*="text-"], .hero [class*="absolute"] [class*="text-"] {
  color: hsl(var(--foreground)) !important;
}

/* CTAs must stay filled and legible on the light canvas */
a[class*="bg-primary"], button[class*="bg-primary"],
a[class*="bg-gradient"], button[class*="bg-gradient"] {
  background-color: hsl(var(--primary)) !important;
  opacity: 1 !important;
  border-color: transparent !important;
}
/* outline/secondary CTAs: give them a visible edge on light */
a[class*="border"][class*="bg-transparent"], button[class*="border"][class*="bg-transparent"],
a[class*="variant-outline"], button[class*="variant-outline"] {
  border: 1px solid hsl(var(--primary)) !important;
  color: hsl(var(--primary)) !important;
  background-color: hsl(var(--card)) !important;
  opacity: 1 !important;
}

/* Hero imagery was shot for a dark page. Fade it hard and lay a light scrim
   over it so headline copy stays readable on the new canvas. */
section img[class*="absolute"], section [class*="bg-\[url"], .hero img[class*="absolute"] {
  opacity: .14 !important;
}
section > [class*="absolute"][class*="inset-0"]:not([class*="container"]) {
  background: linear-gradient(180deg,
    hsl(var(--background) / .82) 0%,
    hsl(var(--background) / .92) 100%) !important;
}

/* footer stays dark for contrast - it is a deliberate anchor, not a surface */
footer, .site-footer {
  background-color: hsl(222 47% 11%) !important;
  color: hsl(210 16% 93%) !important;
}
footer a, .site-footer a { color: hsl(210 16% 93%) !important; }
footer a:hover, .site-footer a:hover { color: #fff !important; }