/* =============================================================
   DESIGN TOKENS — PepShop
   Source of truth: docs/05-brand-book.md §7 + §8
   Do not use hex literals anywhere outside this file.
   ============================================================= */

:root {

  /* -----------------------------------------------------------
     COLOUR — PRIMARY PALETTE (§7.1)
     ----------------------------------------------------------- */
  --color-navy:          #0F172A; /* Announcement bar, Telegram CTA block, footer, primary button */
  --color-slate:         #1E293B; /* Footer secondary row, dark surface variants */
  --color-surface:       #F8FAFC; /* Default page background, nav, Why Us section */
  --color-muted:         #F1F5F9; /* Trust strip, COA archive section, alternating tint */
  --color-white:         #FFFFFF; /* Product cards, modals, nav in scroll state */
  --color-accent:        #0F766E; /* Step markers, purity badge border, active icon, CTA on white */
  --color-accent-soft:   #F0FDFA; /* Purity badge fill, selected state backgrounds */
  --color-text-primary:  #0F172A; /* Body text, headings — reuses navy for maximum contrast */
  --color-text-secondary:#64748B; /* Subheadline, research descriptions, metadata */
  --color-border:        #E2E8F0; /* Card borders, nav bottom rule, horizontal dividers */

  /* -----------------------------------------------------------
     COLOUR — SEMANTIC (§7.2)
     ----------------------------------------------------------- */
  --semantic-success: #059669; /* Order confirmed, COA verified */
  --semantic-warning: #B45309; /* Stock low, response-time note */
  --semantic-danger:  #B91C1C; /* Payment failed, batch unavailable */
  --semantic-info:    #475569; /* Neutral notices, inline legal references */
  --color-star:       #D97706; /* Star rating fill — review UI only */

  /* -----------------------------------------------------------
     TYPOGRAPHY — FAMILIES (§8.1)
     ----------------------------------------------------------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* -----------------------------------------------------------
     TYPOGRAPHY — SCALE (§8.2)
     Desktop sizes; mobile overrides via media query in base.css
     ----------------------------------------------------------- */
  --fs-h1:        40px;
  --fs-h1-mobile: 28px;
  --fs-h2:        32px;
  --fs-h2-mobile: 24px;
  --fs-h3:        20px;
  --fs-h3-mobile: 18px;
  --fs-body-lg:        18px;
  --fs-body-lg-mobile: 16px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-micro:   13px;
  --fs-floor:   12px; /* Minimum — never render text below this size */

  /* -----------------------------------------------------------
     SPACING — 4 px base, 8 pt grid
     space-n = n × 4 px
     ----------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-9:  36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-13: 52px;
  --space-14: 56px;
  --space-15: 60px;
  --space-16: 64px;
  --space-17: 68px;
  --space-18: 72px;
  --space-19: 76px;
  --space-20: 80px;
  --space-24: 96px;

  /* -----------------------------------------------------------
     BORDER RADIUS
     ----------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 999px;

  /* -----------------------------------------------------------
     CONTAINER WIDTHS
     ----------------------------------------------------------- */
  --max-content: 1100px; /* Primary page content container */
  --max-text:     680px; /* Marketing copy columns */
  --max-narrow:   580px; /* Telegram CTA, age gate */
  --max-faq:      720px; /* FAQ accordion */
  --max-trust:    900px; /* Trust strip */

  /* -----------------------------------------------------------
     TRANSITIONS
     ----------------------------------------------------------- */
  --t-fast: 120ms;
  --t-base: 200ms;
}