:root {
  /* Typography */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-price: var(--font-display);

  --font-size-h1: clamp(2.5rem, 2vw + 1.5rem, 3.5rem);
  --font-size-h2: clamp(2rem, 1.6vw + 1rem, 2.75rem);
  --font-size-h3: 1.75rem;
  --font-size-h4: 1.375rem;
  --font-size-body-lg: 1.125rem;
  --font-size-body: 1rem;
  --font-size-caption: 0.875rem;
  --font-size-micro: 0.75rem;

  --line-height-tight: 1.1;
  --line-height-snug: 1.3;
  --line-height-normal: 1.6;

  /* Palette */
  --color-ink: #232030;
  --color-ink-soft: #4a465d;
  /* Secondary text inherits the canonical soft ink instead of introducing
     a third gray-green text color. */
  --color-ink-muted: var(--color-ink-soft);
  --color-forest: #3F6A60;
  --color-forest-dark: #2D4F48;
  /* Footer-only brand surface; popup controls must not inherit this token. */
  --color-footer-green: #1F3E35;
  --color-olive-pill: #829181;
  --color-emerald: var(--color-forest);
  --color-emerald-dark: var(--color-forest-dark);
  --color-cream: #FFF9F1;
  --color-sand: #F8F5ED;
  /* Marketplace page background — warmer than --color-cream, used on
     listing + category + homepage. Listed separately so re-skinning the
     marketplace doesn't also retint Shop Manager surfaces. */
  --color-page-bg: #f8f1eb;
  /* Canonical alert red used by trust badges + sale labels + counter
     warnings. Picks #b91515 (the deeper one) — was previously split
     across #DB0026 / #b91515 on listing page. */
  --color-alert-red: #b91515;

  /* Surface + status tokens originally hard-coded inside the Shop
     Manager <style>. Promoting them here means a single source of
     truth — shop-manager-listing.html no longer needs its own copy.
     Kept under their original Shop Manager names. */
  --color-sand-dark: #EFE7D5;
  --color-mint: var(--color-sand);
  --color-mint-2: var(--color-line);
  --color-line: #E7E2D5;
  --color-line-dark: #D6CFB8;
  --color-info-soft: var(--color-sand);
  --color-alert-soft: #FBE8E8;
  --color-warn: #C98A1A;
  --color-warn-soft: #FBF1DC;
  --color-jedi-picks-yellow: #FFC44D;
  --color-top-badge-blue: rgb(185 212 227 / 0.5);
  --color-top-badge-green: rgb(202 215 184 / 0.5);
  --color-top-badge-coral: rgb(228 181 165 / 0.5);
  --color-top-badge-purple: rgb(213 197 228 / 0.5);
  --color-top-badge-glass: rgb(255 249 241 / 0.5);
  --color-top-badge-border: rgb(35 32 48 / 0.12);
  --color-success: var(--color-forest);
  --color-success-soft: var(--color-sand);
  --color-ink-mute: #6b6680;
  --color-smoke: var(--color-line);
  --color-slate: var(--color-line-dark);
  --color-info: var(--color-forest);
  --color-alert: #E45B5B;
  --color-white: #FFF9F1;
  --color-black: #0b0a10;

  /* ─────────────────────────────────────────────────────────────────
     SEMANTIC INTENT LAYER
     Name colors by what they MEAN, not what they look like. New CSS must
     reference intent.* tokens, never a raw hex and (ideally) never a raw
     palette primitive. This is the single discipline that stops stray
     reds/greens from leaking in: if a value isn't expressible as an
     intent token, that's a signal the design needs a decision, not a
     one-off hex. Primitives above stay as the physical layer these alias.
     (Pattern: Atlassian / W3C design-tokens two-tier model.)
     ───────────────────────────────────────────────────────────────── */
  /* Brand */
  --intent-brand-primary: var(--color-forest);
  --intent-brand-primary-strong: var(--color-forest-dark);
  --intent-brand-on: var(--color-cream);          /* text/icon on brand fill */

  /* Surfaces */
  --intent-surface-page: var(--color-page-bg);    /* marketplace page bg */
  --intent-surface-raised: var(--color-cream);    /* cards, popups, sheets */
  --intent-surface-sunken: var(--color-sand);     /* insets, secondary tiles */
  --intent-surface-line: var(--color-line);       /* hairline borders */
  --intent-surface-line-strong: var(--color-line-dark);

  /* Text */
  --intent-text-primary: var(--color-ink);
  --intent-text-secondary: var(--color-ink-soft);
  --intent-text-on-brand: var(--color-cream);

  /* Interaction states for ink/dark CTAs. Was an inline #3a3650 repeated
     across 5 listing/filters rules — promoted to a token so every dark-button
     hover is identical and auditable. */
  --intent-cta-ink: var(--color-ink);
  --intent-cta-ink-hover: #3a3650;

  /* Feedback — the ONLY place red/green/amber are allowed to originate */
  --intent-feedback-success: var(--color-forest);
  --intent-feedback-success-soft: var(--color-success-soft);
  --intent-feedback-warning: var(--color-warn);
  --intent-feedback-warning-soft: var(--color-warn-soft);
  --intent-feedback-alert: var(--color-alert);          /* soft alert #E45B5B */
  --intent-feedback-alert-strong: var(--color-alert-red); /* deep #b91515 — sale/price */
  --intent-feedback-alert-soft: var(--color-alert-soft);

  /* Status dots (seller online / recent / offline). Never ship a 4th green. */
  --intent-status-online: var(--color-forest);
  --intent-status-recent: var(--color-warn);
  --intent-status-offline: var(--color-line-dark);

  /* Spacing scale */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 6rem;

  /* Semantic spacing rhythm (8px grid). Use these for vertical/horizontal
     stack gaps so every surface shares the same rhythm instead of one-off
     px values. Desktop defaults; components drop to the --*-mobile variant
     under --bp-tablet. Maps onto the --space-* scale above.
       element  = inside a control (icon↔label)         8px
       component= between related blocks (card padding) 16px
       section  = between page sections                 32px  */
  --gap-element: var(--space-2);            /* 8px  */
  --gap-component: var(--space-4);          /* 16px */
  --gap-component-lg: var(--space-5);       /* 24px — the listing media↔aside rhythm */
  --gap-section: var(--space-6);            /* 32px */
  --gap-component-mobile: var(--space-3);   /* 12px */
  --gap-component-lg-mobile: var(--space-4);/* 16px */
  --gap-section-mobile: var(--space-5);     /* 24px */

  /* Radii */
  --radius-pill: 999px;
  --radius-card: 30px;
  --radius-panel: 20px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --radius-xs: 8px;

  /* Shadows */
  --shadow-card: 0 20px 60px rgba(35, 32, 48, 0.08);
  --shadow-float: 0 8px 18px rgba(35, 32, 48, 0.2);
  --shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.12);
  /* Canonical hover shadow for marketplace/homepage cards and banners.
     Keep hover elevation consistent instead of mixing custom shadows. */
  --shadow-card-hover: 0 0 4px rgba(35, 32, 48, 0.5);

  /* Popup / auth surfaces */
  --popup-bg: #FFF9F1;
  --popup-bg-soft: #F8F1EB;
  --popup-bg-muted: #F8F5ED;
  --popup-border: #E7E2D5;
  --popup-border-strong: #D6CFB8;
  --control-border-resting: color-mix(in srgb, var(--popup-border-strong) 72%, var(--color-ink-soft) 28%);
  --popup-control-border: var(--popup-border-strong);
  --popup-outline: var(--color-ink);
  --popup-outline-soft: rgba(35, 32, 48, 0.28);
  --popup-focus: var(--color-forest);
  --popup-control-bg: var(--popup-bg);
  --popup-close-bg: var(--popup-hover);
  --popup-hover: #DCDDD4;
  --control-disabled-bg: #DCDDD3;
  --control-disabled-text: var(--color-ink-soft);
  --auth-disabled-text: var(--color-ink-soft);
  --filter-pill-bg: #eee5da;
  --sort-control-bg: #E1D1BC;
  --sort-control-bg-hover: #CCB89F;
  /* Single source of truth for the button/pill "grow on hover" effect.
     Every pill/button hover-grow points here so it's identical everywhere. */
  --hover-grow-scale: 1.035;
  --sort-option-hover: #DCDDD4;
  --sort-option-selected-bg: transparent;
  --popup-disabled: #EFE7D5;
  --popup-overlay: rgba(35, 32, 48, 0.52);
  --popup-shadow: 0 22px 60px rgba(35, 32, 48, 0.14);
  --popup-shadow-soft: 0 12px 32px rgba(35, 32, 48, 0.1);
  --popup-title-font: var(--font-display);
  --popup-title-size: 25px;
  --popup-title-weight: 600;
  --popup-title-line-height: 1.16;
  --popup-title-letter-spacing: 0;
  --popup-close-width: 78px;
  --popup-close-height: 55px;
  --popup-close-icon-size: 17px;
  --popup-close-offset: 10px;
  --popup-close-hover-bg: var(--sort-control-bg);
  --popup-close-hover-filter: drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12));
  --popup-sheet-radius: 22px 22px 0 0;
  --popup-sheet-grip-height: 44px;
  --popup-sheet-grip-width: 48px;
  --popup-sheet-grip-thickness: 5px;
  --popup-sheet-grip-color: color-mix(in srgb, var(--color-ink) 22%, transparent);
  --popup-sheet-grip-line-width: 43px;
  --popup-sheet-grip-cap-offset: 21.5px;
  --popup-sheet-grip-cap-radius: 2.5px;
  /* Rounded grab-handle pill: a centre bar capped by two full-circle ends so the
     gradient-painted grip reads as a pill (radius = half the thickness), matching
     the <span>-based grips. Uses the cap tokens above. */
  --popup-sheet-grip-pseudo-bg:
    radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% - var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat,
    radial-gradient(circle var(--popup-sheet-grip-cap-radius) at center, var(--popup-sheet-grip-color) 99%, transparent 100%) calc(50% + var(--popup-sheet-grip-cap-offset)) center / var(--popup-sheet-grip-thickness) var(--popup-sheet-grip-thickness) no-repeat,
    linear-gradient(var(--popup-sheet-grip-color), var(--popup-sheet-grip-color)) center / var(--popup-sheet-grip-line-width) var(--popup-sheet-grip-thickness) no-repeat,
    var(--popup-bg);

  /* Motion — expanded */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 700ms;

  /* AI accent system — customizable per tenant via site-config.
     Default stays inside the core ink/cocoa palette. */
  --color-ai-accent: var(--color-ink-soft);
  --color-ai-accent-soft: var(--color-sand);
  --color-ai-accent-deep: var(--color-ink);
  --color-ai-glow: rgba(74, 70, 93, 0.2);
  --gradient-ai: linear-gradient(135deg, var(--color-ink-soft) 0%, #7A563D 100%);
  --gradient-ai-subtle: linear-gradient(135deg, rgba(74,70,93,0.08) 0%, rgba(122,86,61,0.04) 100%);
  --gradient-ai-shimmer: linear-gradient(135deg,
    rgba(74,70,93,0.3) 0%,
    rgba(122,86,61,0.28) 50%,
    rgba(74,70,93,0.3) 100%);

  /* Extended shadows */
  --shadow-elevated: 0 24px 64px -12px rgba(35, 32, 48, 0.12);
  --shadow-ai: 0 16px 48px rgba(74, 70, 93, 0.16);
  --shadow-hover: 0 12px 32px rgba(35, 32, 48, 0.16);
  --shadow-pressed: inset 0 2px 4px rgba(35, 32, 48, 0.08);

  /* Z-index scale */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-overlay: 1000;
  --z-assistant: 1200;
  --z-modal: 2000;
  --z-toast: 3000;
  --z-modal-front: 13000;

  /* Breakpoints */
  --bp-mobile: 640px;
  --bp-tablet: 1024px;
}

:root {
  --gradient-hero: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%);
  --container-max: 1360px;
  --page-bg: var(--color-cream);
}

/* Respect user motion preference — accessibility + EU AI Act friendly */
@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;
  }
}