/* ============================================================================
   Cove.Cards — Colors & Type foundation
   -------------------------------------------------------------------------
   Sourced from the Cove.Cards product (RedOnionQR codebase / globals.css).
   Mobile-first PWA. Black / white / single-accent-red.
   ============================================================================ */

@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700;800&family=Dancing+Script:wght@500;600;700&family=Special+Elite&display=swap");

:root {
  /* ── Brand primitives — colonial burgundy accent, warm neutral base ────── */
  --cove-red:          oklch(0.45 0.20 25);   /* #8B1A1A — primary */
  --cove-red-deep:     oklch(0.35 0.20 25);   /* dark stamp/press   */
  --cove-red-hover:    oklch(0.40 0.20 25);   /* primary/90         */
  --cove-red-tint:     oklch(0.96 0.03 25);   /* primary/5 surface  */
  --cove-red-border:   oklch(0.87 0.06 25);   /* primary/20 outline */

  --cove-cream:        #FDF6F0;               /* PWA background / warm surface */
  --cove-paper:        oklch(0.98 0 0);       /* page background */
  --cove-ink:          oklch(0.12 0 0);       /* near-black foreground */
  --cove-card:         oklch(1 0 0);          /* card surface */

  --cove-border:       oklch(0.88 0 0);
  --cove-input:        oklch(0.88 0 0);
  --cove-muted:        oklch(0.95 0 0);
  --cove-muted-fg:     oklch(0.50 0 0);
  --cove-accent:       oklch(0.92 0 0);

  /* Category tokens (from wallet/directory) — grayscale + red, no rainbow */
  --cove-cat-historic:  oklch(0.27 0 0);      /* bg-zinc-800 */
  --cove-cat-shopping:  oklch(0.55 0 0);      /* bg-zinc-500 */
  --cove-cat-dine:      var(--cove-red);      /* primary */
  --cove-cat-services:  oklch(0.58 0.18 240); /* bg-blue-500 — only non-red accent */

  /* Semantic state */
  --cove-success:      oklch(0.70 0.18 150);  /* green-500 success ticks */
  --cove-destructive:  oklch(0.577 0.245 27.325);

  /* ── Semantic aliases (shadcn-style) ─────────────────────────────────── */
  --fg-1:              var(--cove-ink);
  --fg-2:              var(--cove-muted-fg);
  --bg-page:           var(--cove-paper);
  --bg-card:           var(--cove-card);
  --bg-muted:          var(--cove-muted);
  --border:            var(--cove-border);
  --primary:           var(--cove-red);
  --primary-fg:        var(--cove-paper);

  /* ── Type families ───────────────────────────────────────────────────── */
  --font-sans:    "Raleway", ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-script:  "Dancing Script", cursive;           /* seasonal event copy */
  --font-stamp:   "Special Elite", "Courier New", monospace; /* heritage stamps */

  /* ── Type scale (mobile-first; hero sizes limited — no big desktop feel) ─ */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;   /* page H1 */
  --text-3xl:  30px;
  --text-4xl:  36px;   /* hero / stat numbers */

  /* ── Radii (10px base; Cove uses generous radii on buttons/inputs) ────── */
  --radius:    10px;      /* 0.625rem — shadcn base */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 18px;
  --radius-3xl: 22px;
  --radius-pill: 9999px;

  /* ── Shadow / elevation ──────────────────────────────────────────────── */
  --shadow-xs: 0 1px 1px rgba(12,12,12,0.04);
  --shadow-sm: 0 1px 2px rgba(12,12,12,0.06), 0 1px 1px rgba(12,12,12,0.04);
  --shadow-md: 0 2px 6px rgba(12,12,12,0.08), 0 1px 2px rgba(12,12,12,0.04);
  --shadow-lg: 0 10px 20px rgba(12,12,12,0.10), 0 2px 6px rgba(12,12,12,0.06);
  --shadow-primary: 0 6px 16px -4px oklch(0.45 0.20 25 / 0.35);

  /* ── Spacing (Tailwind-based — mobile card rhythm) ───────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
}

/* ============================================================================
   Semantic typography — use these classes, not raw font-size values
   ============================================================================ */

.cove-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
}

/* Page H1 — e.g. "My Red Onions", "Historical Facts". 2xl / bold */
.cove-h1 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

/* Section H2 — e.g. "Choose Your Experience". lg / semibold */
.cove-h2 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.25;
  color: var(--fg-1);
}

/* Card title — "Historic Adventure" */
.cove-h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.3;
  color: var(--fg-1);
}

/* Stat number — big burgundy number on wallet/progress */
.cove-stat {
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1;
  color: var(--primary);
  font-feature-settings: "tnum";
}

/* Tiny uppercase label — day-short on hours list, category row header */
.cove-eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Body copy */
.cove-p {
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--fg-1);
}

/* Muted / secondary copy — subtitles, helper text */
.cove-muted {
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--fg-2);
}

/* OTP / keyword input — centered mono tracking */
.cove-mono-otp {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  letter-spacing: 0.3em;
  text-align: center;
}

/* Seasonal display — "Spring Stroll" handwriting — sparing use only */
.cove-script {
  font-family: var(--font-script);
  font-weight: 600;
}

/* Historic stamp — "1634 · 1975" — rare, wayfinding-sign feel */
.cove-stamp {
  font-family: var(--font-stamp);
  letter-spacing: 0.05em;
}