/* =============================================================================
   SME — Dark mode (public marketing site).

   WHY A SEPARATE FILE: sme.css is a COMPILED Tailwind build with no source
   config shipped, so colours live partly in HSL custom properties (--background,
   --primary, …) and partly in hardcoded utility classes (.bg-white,
   .text-accent-700, …). A faithful Tailwind rebuild isn't possible without the
   original toolchain config. Instead this file:
     1. Remaps the :root HSL tokens — instantly recolours every token-driven
        utility (text-primary, bg-muted, border-border, bg-background, …).
     2. Overrides the small set of HARDCODED utilities the site actually uses
        (bg-white, text-accent-700, …) so cards/text don't stay light.

   ZERO LIGHT-MODE RISK: every rule is gated behind either
   `@media (prefers-color-scheme: dark)` (respects OS setting) or a
   `html.theme-dark` / `html.theme-light` class (manual toggle below). Light
   mode renders exactly as before — none of these rules apply there.

   The manual toggle (a small JS in the layout) sets html.theme-dark or
   html.theme-light and stores the choice; `.theme-light` wins over the media
   query so a user who explicitly picks Light keeps Light on a dark-OS device.
   ============================================================================= */

/* ---- Shared dark token map (used by both the media query and the class) --- */
:root.theme-dark,
:root.theme-dark body {
  --background: 214 32% 10%;
  --foreground: 210 20% 92%;
  --card: 214 28% 14%;
  --card-foreground: 210 20% 92%;
  --popover: 214 28% 14%;
  --popover-foreground: 210 20% 92%;
  --primary: 210 30% 88%;              /* primary text/icons → light on dark */
  --primary-foreground: 214 32% 12%;
  --secondary: 214 24% 18%;
  --secondary-foreground: 210 20% 90%;
  --muted: 214 24% 16%;
  --muted-foreground: 214 12% 65%;
  --accent: 0 72% 58%;                 /* brand red, brightened for dark bg */
  --accent-foreground: 0 0% 100%;
  --warm: 16 72% 62%;
  --warm-foreground: 0 0% 100%;
  --destructive: 0 72% 58%;
  --destructive-foreground: 0 0% 100%;
  --border: 214 20% 24%;
  --input: 214 20% 24%;
  --ring: 0 72% 58%;
}

/* Hardcoded-utility overrides for dark. Kept in one mixin-like block and
   applied under both the media query and the class via the selector lists. */
:root.theme-dark body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }
:root.theme-dark .bg-white { background-color: hsl(var(--card)) !important; }
:root.theme-dark .bg-white\/10 { background-color: rgba(255,255,255,0.06) !important; }
:root.theme-dark .bg-warm-50 { background-color: hsl(16 30% 18%) !important; }
:root.theme-dark .bg-accent-50 { background-color: hsl(0 40% 16%) !important; }
:root.theme-dark .bg-primary-50 { background-color: hsl(214 24% 16%) !important; }
:root.theme-dark .bg-\[\#f8f9fa\] { background-color: hsl(var(--muted)) !important; }
/* Brand red text needs to brighten so it stays legible on dark surfaces. */
:root.theme-dark .text-accent-700 { color: hsl(0 70% 64%) !important; }
:root.theme-dark .text-warm-700 { color: hsl(16 65% 64%) !important; }
:root.theme-dark .text-warm-600 { color: hsl(16 65% 62%) !important; }
:root.theme-dark .border-primary-100,
:root.theme-dark .border-primary-50,
:root.theme-dark .border-primary-200 { border-color: hsl(var(--border)) !important; }
/* Cards / inputs / selects that used hardcoded near-white. */
:root.theme-dark input,
:root.theme-dark select,
:root.theme-dark textarea { background-color: hsl(214 26% 16%); color: hsl(var(--foreground)); border-color: hsl(var(--border)); }
:root.theme-dark input::placeholder,
:root.theme-dark textarea::placeholder { color: hsl(214 12% 55%); }
/* Plan/feature cards built with .bg-white + shadow read better with a hairline. */
:root.theme-dark .shadow-sm,
:root.theme-dark .shadow-md,
:root.theme-dark .shadow-lg { box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.35) !important; }
/* The WhatsApp FAB and accent buttons keep their own colours — no override. */

@media (prefers-color-scheme: dark) {
  /* Apply the same map by OS preference — UNLESS the user explicitly chose
     light (html.theme-light), which must win. */
  :root:not(.theme-light) {
    --background: 214 32% 10%;
    --foreground: 210 20% 92%;
    --card: 214 28% 14%;
    --card-foreground: 210 20% 92%;
    --popover: 214 28% 14%;
    --popover-foreground: 210 20% 92%;
    --primary: 210 30% 88%;
    --primary-foreground: 214 32% 12%;
    --secondary: 214 24% 18%;
    --secondary-foreground: 210 20% 90%;
    --muted: 214 24% 16%;
    --muted-foreground: 214 12% 65%;
    --accent: 0 72% 58%;
    --accent-foreground: 0 0% 100%;
    --warm: 16 72% 62%;
    --warm-foreground: 0 0% 100%;
    --destructive: 0 72% 58%;
    --destructive-foreground: 0 0% 100%;
    --border: 214 20% 24%;
    --input: 214 20% 24%;
    --ring: 0 72% 58%;
  }
  :root:not(.theme-light) body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }
  :root:not(.theme-light) .bg-white { background-color: hsl(var(--card)) !important; }
  :root:not(.theme-light) .bg-white\/10 { background-color: rgba(255,255,255,0.06) !important; }
  :root:not(.theme-light) .bg-warm-50 { background-color: hsl(16 30% 18%) !important; }
  :root:not(.theme-light) .bg-accent-50 { background-color: hsl(0 40% 16%) !important; }
  :root:not(.theme-light) .bg-primary-50 { background-color: hsl(214 24% 16%) !important; }
  :root:not(.theme-light) .bg-\[\#f8f9fa\] { background-color: hsl(var(--muted)) !important; }
  :root:not(.theme-light) .text-accent-700 { color: hsl(0 70% 64%) !important; }
  :root:not(.theme-light) .text-warm-700 { color: hsl(16 65% 64%) !important; }
  :root:not(.theme-light) .text-warm-600 { color: hsl(16 65% 62%) !important; }
  :root:not(.theme-light) .border-primary-100,
  :root:not(.theme-light) .border-primary-50,
  :root:not(.theme-light) .border-primary-200 { border-color: hsl(var(--border)) !important; }
  :root:not(.theme-light) input,
  :root:not(.theme-light) select,
  :root:not(.theme-light) textarea { background-color: hsl(214 26% 16%); color: hsl(var(--foreground)); border-color: hsl(var(--border)); }
  :root:not(.theme-light) input::placeholder,
  :root:not(.theme-light) textarea::placeholder { color: hsl(214 12% 55%); }
  :root:not(.theme-light) .shadow-sm,
  :root:not(.theme-light) .shadow-md,
  :root:not(.theme-light) .shadow-lg { box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.35) !important; }
}

/* Theme toggle button (rendered in the header). */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid hsl(var(--border));
  border-radius: 10px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.theme-toggle:hover { background: hsl(var(--muted)); }
.theme-toggle:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
:root.theme-dark .theme-toggle .icon-sun,
.theme-toggle[data-effective="dark"] .icon-sun  { display: block; }
:root.theme-dark .theme-toggle .icon-moon,
.theme-toggle[data-effective="dark"] .icon-moon { display: none; }