/* =========================================================================
   MARKET POP — Design Tokens
   A daylight fork of the Farsight design system for everyday ecommerce
   merchants. Brighter, warmer, rounder. Drop this into any project and
   reference the custom properties below.

   Fonts (load via Google Fonts):
   Space Grotesk (display) · DM Sans (body/UI) · DM Mono (numbers)
   <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
   ========================================================================= */

:root {
  /* ---- Core palette ---------------------------------------------------- */
  --pop-tangerine:       #FF5A24;  /* PRIMARY — CTAs, active nav, your-brand data */
  --pop-tangerine-soft:  #FF8A4F;  /* secondary bars, hover lift */
  --pop-gold:            #F5B400;  /* AI signal · everyday accent (Magpie heritage) */
  --pop-grow:            #12B36A;  /* positive / up */
  --pop-ink:             #231F18;  /* primary text, dark buttons */
  --pop-mist:            #8C8782;  /* secondary text, captions */
  --pop-clay:            #6B5A3A;  /* warm body text on tinted surfaces */

  /* ---- Surfaces -------------------------------------------------------- */
  --pop-page:            #FFF7EA;  /* app background (warm butter-cream) */
  --pop-card:            #FFFFFF;  /* primary surface */
  --pop-card-warm:       #FFFDF7;  /* answer-card body tint */
  --pop-sidebar:         #FCEFD6;  /* butter sidebar */

  /* ---- Tinted surfaces (one per block, never stacked) ------------------ */
  --pop-peach:           #FFE6D5;  --pop-peach-ink:   #C24E1C;
  --pop-butter:          #FFF0CE;  --pop-butter-ink:  #A37800;
  --pop-mint:            #E3F6EC;  --pop-mint-ink:    #0F8A52;
  --pop-sky:             #E2F2FB;  --pop-sky-ink:     #1C6FA8;
  --pop-blush:           #FDECEA;  --pop-blush-ink:   #C0392B;

  /* ---- Semantic -------------------------------------------------------- */
  --pop-up:              #12B36A;
  --pop-down:            #E5483D;
  --pop-warn:            #F5B400;
  --pop-info:            #2E9BD6;

  /* ---- Lines ----------------------------------------------------------- */
  --pop-line:            rgba(26, 25, 22, 0.08);
  --pop-line-strong:     rgba(26, 25, 22, 0.14);
  --pop-line-warm:       rgba(180, 140, 60, 0.18);

  /* ---- Typography ------------------------------------------------------ */
  --pop-font-display: 'Space Grotesk', sans-serif;  /* headings, brand */
  --pop-font-sans:    'DM Sans', sans-serif;        /* body, UI */
  --pop-font-mono:    'DM Mono', monospace;         /* numbers, SQL, timestamps */

  /* ---- Radii — rounder than Farsight ----------------------------------- */
  --pop-r-block:   12px;   /* inner rows, data tiles */
  --pop-r-card:    18px;   /* panels, modals, surfaces */
  --pop-r-pill:    999px;  /* buttons, chips, inputs */
  /* Signature asymmetric chat corners */
  --pop-r-answer:  3px 16px 16px 16px;  /* AI answer card */
  --pop-r-user:    16px 16px 4px 16px;  /* user bubble */

  /* ---- Elevation — soft + warm-tinted ---------------------------------- */
  --pop-shadow-rest: 0 1px 3px rgba(180, 110, 30, 0.06);
  --pop-shadow-pop:  0 6px 26px rgba(180, 110, 30, 0.12);
  --pop-glow-cta:    0 3px 9px rgba(255, 90, 36, 0.30);  /* tangerine CTA lift */
}