/* vetted.reviews — design tokens (spec §2.2–2.4) */
:root {
  /* Colour */
  --ground:       #F6F4EE;
  --surface:      #FFFFFF;
  --surface-alt:  #E6F1EE;
  --ink:          #101C26;
  --ink-2:        #4A5560;
  --ink-3:        #6B7680;
  --ink-muted:    #AEB8BF;
  --line:         #E3DFD4;
  --line-2:       #ECE8DF;
  --line-3:       #D8D3C7;
  --green:        #0B6E5C;
  --green-hover:  #085546;
  --green-light:  #7FD1B9;
  --green-pale:   #BFE3D9;
  --star:         #E0A82E;
  --star-empty:   #DDD8CC;
  --dark-surface: #1A2836;
  --red:          #B3261E;
  --red-pale:     #F8E4E2;
  --amber:        #9A6700;
  --amber-pale:   #FBF1DD;

  /* Type */
  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --text-xs:   13px;
  --text-sm:   14px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   19px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  40px;
  --text-hero: 72px;

  /* Spacing (4px base) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 28px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
  --s-16: 64px; --s-20: 80px; --s-24: 96px;

  --gutter:        80px;
  --section-pad:   96px;
  --content-max:   1280px;

  /* Radius */
  --r-btn:   8px;
  --r-input: 12px;
  --r-card:  16px;
  --r-panel: 20px;
  --r-pill:  999px;

  /* Shadow (search bar only) */
  --shadow-search: 0 8px 28px rgba(16, 28, 38, 0.07);

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur:  160ms;
}

@media (max-width: 800px) {
  :root {
    --gutter:      20px;
    --section-pad: 40px;
    --text-hero:   40px;
    --text-3xl:    32px;
  }
}