/* ═══════════════════════════════════════════════════════════════
   Theme — SHARED design tokens (single source of truth)
   Loaded by BOTH layouts/base.html (marketing) and
   layouts/app_base.html (app), BEFORE the surface CSS.

   Edit a value here and it changes on every page. Surface-specific
   tokens (--app-* palette, per-surface radii, fonts, footer,
   animations) live in app.css / marketing.css and intentionally
   differ — do NOT move those here.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Neutrals (page/surface base) ── */
  --background: hsl(0 0% 99%);
  --foreground: hsl(0 0% 8%);
  --card: hsl(0 0% 100%);
  --muted-foreground: hsl(0 0% 42%);
  --border: hsl(0 0% 90%);

  /* ── Sage brand ── */
  --mkt-sage: hsl(155 25% 46%);
  --mkt-sage-soft: hsl(155 25% 46% / 0.08);
  --mkt-sage-text: hsl(155 30% 38%);

  /* ── Text tones ── */
  --mkt-body-color: hsl(0 0% 42%);
  --mkt-caption-color: hsl(0 0% 55%);
  --mkt-subtle-color: hsl(0 0% 72%);

  /* ── Card borders ── */
  --mkt-card-border: hsl(0 0% 90%);
  --mkt-card-border-hover: hsl(0 0% 78%);

  /* ── Status ── */
  --destructive: hsl(0 65% 50%);

  /* ── Warm surface ── */
  --mkt-bg-warm: hsl(40 12% 97%);

  /* ── Glass (frosted overlays / navbar) ── */
  --marketing-glass: hsl(0 0% 100% / 0.82);
  --marketing-glass-strong: hsl(0 0% 100% / 0.92);
  --marketing-glass-border: hsl(0 0% 0% / 0.06);

  /* ── Chip / tag ── */
  --chip-bg: hsl(155 25% 46% / 0.08);
  --chip-border: hsl(155 25% 46% / 0.14);
  --chip-text: hsl(155 30% 38%);
}