/* ══════════════════════════════════════════════════════════
   The Lineup — Design System
   Shared foundation for all Lineup markets.
   Market-specific accent colors are set per-market below.
   ══════════════════════════════════════════════════════════ */

/* ── COLOR PALETTE ── */
:root {
  /* ── DEEP NAVY NEUTRAL SCALE ──
     Stone lights + navy darks. See docs/color-system-spec.md */

  --navy-0:   #FFFFFF;
  --navy-25:  #FAFBFC;
  --navy-50:  #F4F5F7;
  --navy-75:  #E8E9EC;
  --navy-100: #D6D8DC;
  --navy-200: #A4A8B0;
  --navy-300: #6E7485;
  --navy-400: #475068;
  --navy-500: #2E3A52;
  --navy-600: #1C2840;
  --navy-700: #0F1D35;
  --navy-800: #0C1B2E;
  --navy-900: #070E1A;

  /* ── ALIASES — old names pointing to new Deep Navy values ── */
  --white:          var(--navy-0);
  --offwhite:       var(--navy-25);
  --linen:          var(--navy-75);
  --taupe:          var(--navy-200);
  --gray-50:        var(--navy-50);
  --gray-100:       var(--navy-75);
  --gray-200:       var(--navy-100);
  --gray-300:       var(--navy-100);
  --gray-400:       var(--navy-200);
  --gray-500:       var(--navy-300);
  --gray-600:       var(--navy-400);
  --gray-700:       var(--navy-700);
  --gray-800:       var(--navy-800);
  --gray-900:       var(--navy-900);

  --editorial:      var(--navy-700);
  --editorial-dark: var(--navy-800);
  --editorial-light: var(--navy-400);

  --teal:           var(--navy-700);
  --teal-dark:      var(--navy-800);
  --teal-light:     var(--navy-400);

  /* ── FUNCTIONAL COLORS (unchanged) ── */
  --sage:           #78B0A0;
  --sage-dark:      #5E9A88;
  --sage-light:     #9ECAB8;

  --peach:          #F07060;
  --peach-dark:     #D85E50;
  --peach-light:    #F0A090;

  --parent-accent:  #D4573B;

  /* ── MARKET ACCENT — set by Base.astro per-market ── */
  /* No defaults here; Base.astro always injects --accent, --accent-dark,
     --accent-light, and --gradient-brand via inline <style>. */

  /* Aliases — so existing component CSS keeps working */
  --coral:          var(--accent);
  --coral-dark:     var(--accent-dark);
  --coral-light:    var(--accent-light);

  /* ── SEMANTIC TOKENS ── */
  --text-primary:   var(--navy-900);
  --text-secondary: var(--navy-400);
  --text-muted:     var(--navy-200);
  --text-inverse:   var(--navy-0);
  --text-heading:   var(--navy-700);
  --text-link:      var(--accent);
  --text-link-hover: var(--accent-dark);

  --bg-page:        var(--navy-25);
  --bg-surface:     var(--navy-75);
  --bg-surface-raised: var(--navy-0);
  --bg-subtle:      var(--navy-50);
  --bg-dark:        var(--navy-700);
  --bg-darker:      var(--navy-800);
  --bg-accent:      var(--accent);

  /* Aliases for old names */
  --bg-primary:     var(--bg-page);
  --bg-secondary:   var(--bg-surface);
  --bg-tertiary:    var(--bg-subtle);
  --bg-dark-alt:    var(--bg-darker);

  --border-subtle:  var(--navy-75);
  --border-default: var(--navy-100);
  --border-strong:  var(--navy-200);
  --border-accent:  var(--accent);

  /* Aliases for old names */
  --border-light:   var(--border-subtle);
  --border-dark:    var(--border-strong);

  --success:        #78B0A0;
  --warning:        #F0A090;
  --error:          #D64545;
  --info:           var(--navy-400);

  /* Paper warm-neutrals (front-door v2) — large-surface warmth comes from
     paper, navy, and photography, NEVER plum tints. */
  --paper:          #F7F4EE;  /* default body background */
  --paper-warm:     #FEF9F5;  /* panels, cards, warm sections */
  --paper-warmer:   #F4EDE3;  /* app-pull module, deepest warm fill */

  /* ── TYPOGRAPHY ── */

  /* Font stacks — front-door v2 editorial firewall.
     Canonical tokens: --serif (editorial/publication voice) · --sans (commercial/chrome) · --mono (utility data).
     Faces delivered via the shared Adobe Fonts kit (clt3kwd): source-serif-4-variable + forma-djr-text.
     The two families never co-locate on one element — that separation IS the firewall. */
  --serif:          'source-serif-4-variable', 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:           'forma-djr-text', 'Forma DJR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Inter, 'Helvetica Neue', Arial, sans-serif;
  --mono:           'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Back-compat aliases — retire per-component as templates migrate to --serif/--sans/--mono.
     display + editorial are serif in v2; body/chrome maps to sans. */
  --font-display:   var(--serif);
  --font-editorial: var(--serif);
  --font-body:      var(--sans);
  --font-mono:      var(--mono);

  /* Font sizes — modular scale (1.25 ratio, 16px base) */
  --text-xs:        0.8125rem;  /* 13px */
  --text-sm:        0.875rem;   /* 14px */
  --text-base:      1rem;       /* 16px */
  --text-md:        1.125rem;   /* 18px */
  --text-lg:        1.25rem;    /* 20px */
  --text-xl:        1.5rem;     /* 24px */
  --text-2xl:       1.875rem;   /* 30px */
  --text-3xl:       2.25rem;    /* 36px */
  --text-4xl:       3rem;       /* 48px */
  --text-5xl:       3.75rem;    /* 60px */

  /* Font weights */
  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;

  /* Line heights */
  --leading-none:   1;
  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;
  --leading-loose:  2;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.14em;

  /* ── SPACING ── (4px base unit) */
  --space-0:    0;
  --space-1:    0.25rem;   /* 4px */
  --space-2:    0.5rem;    /* 8px */
  --space-3:    0.75rem;   /* 12px */
  --space-4:    1rem;      /* 16px */
  --space-5:    1.25rem;   /* 20px */
  --space-6:    1.5rem;    /* 24px */
  --space-8:    2rem;      /* 32px */
  --space-10:   2.5rem;    /* 40px */
  --space-12:   3rem;      /* 48px */
  --space-16:   4rem;      /* 64px */
  --space-20:   5rem;      /* 80px */
  --space-24:   6rem;      /* 96px */
  --space-32:   8rem;      /* 128px */

  /* Layout container primitives (front-door v2) */
  --max:        1280px;                  /* .wrap max-width */
  --gutter:     clamp(16px, 3vw, 32px);  /* .wrap horizontal padding */

  /* ── BORDER RADIUS ── */
  --radius-none:  0;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   24px;
  --radius-full:  9999px;

  /* ── SHADOWS ── */
  --shadow-xs:    0 1px 2px rgba(7, 14, 26, 0.06);
  --shadow-sm:    0 1px 3px rgba(7, 14, 26, 0.09), 0 1px 2px rgba(7, 14, 26, 0.05);
  --shadow-md:    0 4px 6px rgba(7, 14, 26, 0.07), 0 2px 4px rgba(7, 14, 26, 0.05);
  --shadow-lg:    0 10px 15px rgba(7, 14, 26, 0.09), 0 4px 6px rgba(7, 14, 26, 0.05);
  --shadow-xl:    0 20px 25px rgba(7, 14, 26, 0.10), 0 8px 10px rgba(7, 14, 26, 0.04);
  --shadow-2xl:   0 25px 50px rgba(7, 14, 26, 0.18);
  --shadow-inner: inset 0 2px 4px rgba(7, 14, 26, 0.07);

  /* ── TRANSITIONS ── */
  --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.16, 1, 0.3, 1);

  --duration-fast:     100ms;
  --duration-normal:   200ms;
  --duration-slow:     300ms;
  --duration-slower:   500ms;
  --motion-duration-loop: 1200ms;  /* Pulse: tau / live-now / app-cta dot */

  --transition-colors: color var(--duration-normal) var(--ease-default),
                        background-color var(--duration-normal) var(--ease-default),
                        border-color var(--duration-normal) var(--ease-default);
  --transition-transform: transform var(--duration-slow) var(--ease-spring);
  --transition-shadow: box-shadow var(--duration-slow) var(--ease-default);
  --transition-all: all var(--duration-normal) var(--ease-default);

  /* ── BREAKPOINTS (reference — use in media queries) ──
     --bp-xs:   375px    (small phones)
     --bp-sm:   640px    (large phones / small tablets)
     --bp-md:   768px    (tablets)
     --bp-lg:   1024px   (small laptops)
     --bp-xl:   1280px   (desktops)
  */

  /* ── Z-INDEX SCALE ── */
  --z-base:       0;
  --z-dropdown:   10;
  --z-sticky:     20;
  --z-fixed:      30;
  --z-overlay:    40;
  --z-modal:      50;
  --z-toast:      60;

  /* ── LAYOUT ── */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1200px;
  --container-2xl:  1400px;

  --sidebar-width:  320px;
  --content-width:  720px;
  --content-wide:   960px;

  /* ══════════════════════════════════════════
     COMPONENT TOKENS
     ══════════════════════════════════════════ */

  /* ── CARD ── */
  --card-bg:            var(--bg-surface-raised);
  --card-border:        var(--border-light);
  --card-radius:        var(--radius-lg);
  --card-shadow:        var(--shadow-sm);
  --card-shadow-hover:  var(--shadow-lg);
  --card-padding:       var(--space-6);
  --card-gap:           var(--space-6);

  /* ── BUTTON ── */
  --btn-font:           var(--font-body);
  --btn-font-size:      var(--text-sm);
  --btn-font-weight:    var(--font-semibold);
  --btn-letter-spacing: var(--tracking-wide);
  --btn-radius:         var(--radius-md);
  --btn-padding-x:      var(--space-6);
  --btn-padding-y:      var(--space-3);
  --btn-transition:     var(--transition-colors), var(--transition-transform);

  --btn-primary-bg:     var(--accent);
  --btn-primary-text:   var(--white);
  --btn-primary-hover:  var(--accent-dark);

  --btn-secondary-bg:   var(--editorial);
  --btn-secondary-text: var(--white);
  --btn-secondary-hover: var(--editorial-dark);

  --btn-outline-bg:     transparent;
  --btn-outline-text:   var(--editorial);
  --btn-outline-border: var(--editorial);
  --btn-outline-hover-bg: var(--editorial);
  --btn-outline-hover-text: var(--white);

  --btn-ghost-bg:       transparent;
  --btn-ghost-text:     var(--text-secondary);
  --btn-ghost-hover-bg: var(--gray-50);

  /* ── INPUT / FORM ── */
  --input-bg:           var(--white);
  --input-border:       var(--gray-200);
  --input-border-focus: var(--editorial);
  --input-radius:       var(--radius-md);
  --input-padding-x:    var(--space-4);
  --input-padding-y:    var(--space-3);
  --input-font-size:    var(--text-base);
  --input-placeholder:  var(--gray-400);
  --input-shadow-focus: 0 0 0 3px rgba(15, 29, 53, 0.12);

  /* ── BADGE ── */
  --badge-font-size:    var(--text-xs);
  --badge-font-weight:  var(--font-semibold);
  --badge-letter-spacing: var(--tracking-wider);
  --badge-padding-x:    var(--space-3);
  --badge-padding-y:    var(--space-1);
  --badge-radius:       var(--radius-full);
  --badge-text-transform: uppercase;

  /* ── CATEGORY COLOR FAMILIES (8 families) ── */
  /* See docs/color-system-spec.md for full mapping */

  /* Food & Drink — warm amber */
  --cat-food-mid:           #E67E22;
  --cat-food-light:         #FEF3E2;
  --cat-food-text:          #7A4510;

  /* Music & Nightlife — electric violet */
  --cat-music-mid:          #8B5CF6;
  --cat-music-light:        #EDE9FE;
  --cat-music-text:         #4C1D95;

  /* Outdoors & Nature — evergreen */
  --cat-outdoors-mid:       #059669;
  --cat-outdoors-light:     #ECFDF5;
  --cat-outdoors-text:      #064E3B;

  /* Arts & Culture — ocean teal */
  --cat-arts-mid:           #0891B2;
  --cat-arts-light:         #E0F7FA;
  --cat-arts-text:          #164E63;

  /* Community & Family — true blue */
  --cat-community-mid:      #2563EB;
  --cat-community-light:    #EFF6FF;
  --cat-community-text:     #1E3A5F;

  /* Shopping & Services — cool gray */
  --cat-shopping-mid:       #64748B;
  --cat-shopping-light:     #F1F5F9;
  --cat-shopping-text:      #334155;

  /* News & Editorial — signal red */
  --cat-news-mid:           #DC2626;
  --cat-news-light:         #FEF2F2;
  --cat-news-text:          #7F1D1D;

  /* Classes & Workshops (learning) — deep gold */
  --cat-learning-mid:       #CA8A04;
  --cat-learning-light:     #FEFCE8;
  --cat-learning-text:      #713F12;

  /* Featured — uses market accent */
  --badge-featured-bg:      var(--accent);
  --badge-featured-text:    var(--navy-0);

  /* Area badge */
  --badge-area-bg:          var(--navy-75);
  --badge-area-text:        var(--navy-500);

  /* ── LEGACY BADGE ALIASES (old names → new families) ── */
  --badge-food-bg:          var(--cat-food-light);
  --badge-food-text:        var(--cat-food-text);
  --badge-entertainment-bg: var(--cat-music-light);
  --badge-entertainment-text: var(--cat-music-text);
  --badge-things-bg:        var(--cat-outdoors-light);
  --badge-things-text:      var(--cat-outdoors-text);
  --badge-news-bg:          var(--cat-news-light);
  --badge-news-text:        var(--cat-news-text);
  --badge-guides-bg:        var(--cat-news-light);
  --badge-guides-text:      var(--cat-news-text);
  --badge-brewery-bg:       var(--cat-food-light);
  --badge-brewery-text:     var(--cat-food-text);
  --badge-coral-bg:         var(--cat-music-light);
  --badge-coral-text:       var(--cat-music-text);
  --badge-teal-bg:          var(--cat-community-light);
  --badge-teal-text:        var(--cat-community-text);
  --badge-green-bg:         var(--cat-outdoors-light);
  --badge-green-text:       var(--cat-outdoors-text);
  --badge-gold-bg:          var(--cat-food-light);
  --badge-gold-text:        var(--cat-food-text);
  --badge-mauve-bg:         var(--cat-arts-light);
  --badge-mauve-text:       var(--cat-arts-text);

  /* ── NAV ── */
  --nav-bg:             var(--white);
  --nav-border:         var(--border-light);
  --nav-text:           var(--text-primary);
  --nav-text-hover:     var(--accent);
  --nav-text-active:    var(--accent);
  --nav-font-size:      var(--text-base);
  --nav-font-weight:    var(--font-medium);
  --nav-letter-spacing: var(--tracking-wide);
  --nav-height:         64px;
  --nav-height-mobile:  56px;

  --nav-dropdown-bg:    var(--white);
  --nav-dropdown-shadow: var(--shadow-xl);
  --nav-dropdown-radius: var(--radius-lg);

  /* ── AD SLOT ── */
  --ad-bg:              var(--gray-50);
  --ad-border:          var(--border-light);
  --ad-radius:          var(--radius-md);
  --ad-label-color:     var(--text-muted);
  --ad-label-font-size: var(--text-xs);
  --ad-label-spacing:   var(--tracking-widest);

  /* Standard IAB sizes */
  --ad-leaderboard-w:   728px;
  --ad-leaderboard-h:   90px;
  --ad-rectangle-w:     300px;
  --ad-rectangle-h:     250px;
  --ad-mobile-banner-w: 320px;
  --ad-mobile-banner-h: 50px;

  /* ── HERO ── */
  --hero-bg:            var(--editorial);
  --hero-text:          var(--white);
  --hero-accent:        var(--accent-light);
  --hero-overlay:       rgba(15, 29, 53, 0.58);
  --hero-padding-y:     var(--space-20);
  --hero-padding-y-mobile: var(--space-12);

  /* ── SIDEBAR ── */
  --sidebar-gap:        var(--space-8);
  --sidebar-widget-bg:  var(--linen);
  --sidebar-widget-padding: var(--space-6);
  --sidebar-widget-radius: var(--radius-lg);
  --sidebar-widget-border: var(--border-light);

  /* ── FOOTER ── */
  --footer-bg:          var(--editorial-dark);
  --footer-text:        rgba(255, 255, 255, 0.6);
  --footer-heading:     var(--white);
  --footer-link:        rgba(255, 255, 255, 0.75);
  --footer-link-hover:  var(--accent-light);
  --footer-border:      rgba(255, 255, 255, 0.1);

  /* ── FILTER BAR ── */
  --filter-bg:          var(--white);
  --filter-border:      var(--border-light);
  --filter-radius:      var(--radius-lg);
  --filter-shadow:      var(--shadow-sm);
  --filter-chip-bg:     var(--gray-50);
  --filter-chip-active-bg: var(--editorial);
  --filter-chip-active-text: var(--white);
  --filter-chip-radius: var(--radius-full);

  /* ── EVENT CARD ── */
  --event-date-bg:      var(--accent);
  --event-date-text:    var(--white);
  --event-date-radius:  var(--radius-md);

  /* ── NEWSLETTER SIGNUP ── */
  --newsletter-bg:      var(--accent);
  --newsletter-text:    var(--white);
  --newsletter-input-bg: rgba(255, 255, 255, 0.95);
  --newsletter-radius:  var(--radius-lg);

  /* ── SECTION BACKGROUNDS ── */
  --section-default: #FAFBFC;
  --section-warm:    #FEF9F5;
  --section-sage:    #F2F8F5;
  --section-mist:    #EDF2F5;
}

/* ══════════════════════════════════════════
   DARK MODE (future-ready)
   ══════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root {
    /* Override only if/when dark mode is implemented */
  }
}

/* ══════════════════════════════════════════
   BASE RESET & DEFAULTS
   ══════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

a {
  color: var(--text-link);
  text-decoration: none;
}

a:hover {
  color: var(--text-link-hover);
}

/* ══════════════════════════════════════════
   TYPOGRAPHY UTILITIES
   ══════════════════════════════════════════ */

.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }

.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md   { font-size: var(--text-md); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }

/* ══════════════════════════════════════════
   ACCESSIBILITY
   ══════════════════════════════════════════ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════
   PROSE — Article Typography
   Good reading experience for long-form content.
   ══════════════════════════════════════════ */

.prose {
  max-width: 65ch;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
}

.prose p {
  margin-bottom: 1.25em;
}

.prose p:last-child {
  margin-bottom: 0;
}

/* Headings */
.prose h2 {
  font-family: var(--font-editorial);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--text-heading);
  line-height: var(--leading-snug);
  color: var(--editorial);
  margin-top: 2.5em;
  margin-bottom: 0.75em;
}

.prose h3 {
  font-family: var(--font-editorial);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-heading);
  line-height: var(--leading-snug);
  color: var(--editorial);
  margin-top: 2em;
  margin-bottom: 0.5em;
}

.prose h4 {
  font-family: var(--font-editorial);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-heading);
  line-height: var(--leading-snug);
  color: var(--editorial);
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

.prose h2:first-child,
.prose h3:first-child,
.prose h4:first-child {
  margin-top: 0;
}

/* When prose is split by an ad, keep spacing on the continuation */
.prose--continued h2:first-child,
.prose--continued h3:first-child,
.prose--continued h4:first-child {
  margin-top: 2em;
}

/* Links */
.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--duration-normal) var(--ease-default),
              text-decoration-color var(--duration-normal) var(--ease-default);
}

.prose a:hover {
  color: var(--accent-dark);
  text-decoration-thickness: 2px;
}

/* Blockquotes */
.prose blockquote {
  border-left: 4px solid var(--accent);
  padding-left: 1.5em;
  margin: 1.5em 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.prose blockquote p {
  margin-bottom: 0.5em;
}

.prose blockquote p:last-child {
  margin-bottom: 0;
}

/* Lists */
.prose ul,
.prose ol {
  padding-left: 1.5em;
  margin-bottom: 1.25em;
}

.prose li {
  margin-bottom: 0.5em;
  line-height: var(--leading-relaxed);
}

.prose li:last-child {
  margin-bottom: 0;
}

.prose ul li {
  list-style-type: disc;
}

.prose ol li {
  list-style-type: decimal;
}

.prose li > ul,
.prose li > ol {
  margin-top: 0.5em;
  margin-bottom: 0;
}

/* Images */
.prose img {
  width: 100%;
  border-radius: var(--radius-md);
  margin: 1.5em 0;
}

.prose figure {
  margin: 1.5em 0;
}

.prose figure img {
  margin: 0 0 0.5em 0;
}

.prose figcaption {
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
}

/* Code */
.prose code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--gray-50);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  color: var(--teal);
}

.prose pre {
  background: var(--gray-900);
  color: var(--gray-100);
  padding: 1.25em 1.5em;
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: 1.5em 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.prose pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  color: inherit;
  font-size: inherit;
}

/* Horizontal rule */
.prose hr {
  border: none;
  border-top: 1px solid var(--border-default);
  margin: 2em 0;
}

/* Tables */
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: var(--text-base);
}

.prose th,
.prose td {
  padding: 0.75em 1em;
  border-bottom: 1px solid var(--border-light);
  text-align: left;
}

.prose th {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  border-bottom-color: var(--border-default);
}

/* Strong & emphasis */
.prose strong {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.prose em {
  font-style: italic;
}

/* Callout / Tip boxes */
.prose .callout {
  background: var(--cream, #FDF8F0);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin: 1.5em 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.prose .callout strong {
  color: var(--text-primary);
  font-size: var(--text-sm);
}

.prose .callout p {
  margin: 0;
}

.prose .callout p + p {
  margin-top: 0.5em;
}

.prose .callout--tip {
  border-left-color: var(--sage);
  background: #F0F7F4;
}

.prose .callout--warning {
  border-left-color: #E6A817;
  background: #FFF9E6;
}

/* ══════════════════════════════════════════
   EDITORIAL TYPOGRAPHY
   Serif font for page titles and hero headings
   ══════════════════════════════════════════ */

.section-title--editorial {
  font-family: var(--font-editorial);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ══════════════════════════════════════════
   SECTION BACKGROUNDS
   Visual rhythm between page sections
   ══════════════════════════════════════════ */

.section--warm {
  background: #FDF5F0;
}

.section--sage {
  background: #F2F8F5;
}

.section--mist {
  background: #EDF2F5;
}

.section--pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0c2 10 10 18 20 20-10 2-18 10-20 20-2-10-10-18-20-20C20 18 28 10 30 0z' fill='%23D96B3F' fill-opacity='0.03'/%3E%3C/svg%3E");
}

/* ══════════════════════════════════════════
   CATEGORY CARD ACCENTS
   Top border colors per content category
   ══════════════════════════════════════════ */

/* Article category accents — 7-family color system */
.card-accent--food-drink     { border-top: 3px solid var(--cat-food-mid); }
.card-accent--entertainment  { border-top: 3px solid var(--cat-music-mid); }
.card-accent--things-to-do   { border-top: 3px solid var(--cat-outdoors-mid); }
.card-accent--news           { border-top: 3px solid var(--cat-news-mid); }
.card-accent--guides         { border-top: 3px solid var(--cat-arts-mid); }

/* Event category accents — 7-family color system */
.card-accent--music     { border-top: 3px solid var(--cat-music-mid); }
.card-accent--karaoke   { border-top: 3px solid var(--cat-music-mid); }
.card-accent--dance-party { border-top: 3px solid var(--cat-music-mid); }
.card-accent--nightlife { border-top: 3px solid var(--cat-music-mid); }
.card-accent--community { border-top: 3px solid var(--cat-community-mid); }
.card-accent--bingo     { border-top: 3px solid var(--cat-community-mid); }
.card-accent--game-night { border-top: 3px solid var(--cat-community-mid); }
.card-accent--trivia    { border-top: 3px solid var(--cat-community-mid); }
.card-accent--family    { border-top: 3px solid var(--cat-community-mid); }
.card-accent--outdoor   { border-top: 3px solid var(--cat-outdoors-mid); }
.card-accent--sports    { border-top: 3px solid var(--cat-outdoors-mid); }
.card-accent--markets   { border-top: 3px solid var(--cat-outdoors-mid); }
.card-accent--food-drink { border-top: 3px solid var(--cat-food-mid); }
.card-accent--festivals { border-top: 3px solid var(--cat-food-mid); }
.card-accent--arts      { border-top: 3px solid var(--cat-arts-mid); }
.card-accent--comedy    { border-top: 3px solid var(--cat-arts-mid); }

/* ══════════════════════════════════════════
   ENHANCED MICRO-INTERACTIONS
   ══════════════════════════════════════════ */

/* Subtle glow on primary CTA buttons */
@keyframes gentle-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 107, 63, 0.3); }
  50% { box-shadow: 0 0 0 6px rgba(217, 107, 63, 0); }
}

.btn-pulse {
  animation: gentle-pulse 3s ease-in-out infinite;
}

/* Image zoom on hover for cards with photos */
.card-hover-zoom {
  overflow: hidden;
}

.card-hover-zoom img {
  transition: transform var(--duration-slower) var(--ease-default);
}

.card-hover-zoom:hover img {
  transform: scale(1.06);
}

/* Section divider with decorative element */
.section-divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-12) 0;
}

.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border-default), transparent);
}

.section-divider__icon {
  color: var(--coral);
  flex-shrink: 0;
}