/* Phil's Vegetables — design tokens
   Ported verbatim from the design system (tokens/colors.css, typography.css,
   spacing.css, fonts.css). Fonts are Google Fonts stand-ins; swap for licensed
   brand fonts if/when supplied. */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Caveat:wght@500;600;700&display=swap');

:root {
  /* ---- Brand greens (primary) ---- */
  --green-900: #1c3311;   /* deepest leaf — headings on cream */
  --green-800: #26451a;
  --green-700: #315b1f;   /* PRIMARY brand green */
  --green-600: #40732a;
  --green-500: #55913a;
  --green-400: #78b357;   /* fresh pea shoot */
  --green-300: #a6d187;
  --green-200: #cbe6b4;
  --green-100: #e6f2d8;

  /* ---- Paper / neutrals ---- */
  --cream-50:  #faf6ec;   /* page background — warm paper */
  --cream-100: #f3ecdb;   /* raised paper / cards */
  --cream-200: #e9dfc7;   /* borders, hairlines */
  --cream-300: #d8cba9;
  --ink-900:   #241f18;   /* body ink — warm near-black */
  --ink-700:   #453d30;
  --ink-500:   #6d6350;   /* muted / captions */
  --ink-300:   #a89b82;

  /* ---- Produce accents ---- */
  --tomato:    #d9432b;   /* tomato red — sale / heat */
  --tomato-dk: #b3311d;
  --carrot:    #e8802b;   /* carrot orange */
  --squash:    #f2b134;   /* sunshine / squash yellow */
  --beet:      #7a2c53;   /* beetroot / aubergine */
  --beet-dk:   #5c1f3f;
  --sky:       #6fb3c7;   /* wash-water blue */

  /* ---- Semantic aliases ---- */
  --brand:            var(--green-700);
  --brand-strong:     var(--green-800);
  --brand-soft:       var(--green-100);

  --bg-page:          var(--cream-50);
  --bg-raised:        var(--cream-100);
  --surface-card:     #fffdf7;
  --surface-invert:   var(--green-800);

  --text-heading:     var(--green-900);
  --text-body:        var(--ink-900);
  --text-muted:       var(--ink-500);
  --text-on-brand:    var(--cream-50);
  --text-link:        var(--green-700);

  --border-soft:      var(--cream-200);
  --border-strong:    var(--cream-300);
  --border-ink:       var(--ink-900);

  --accent-sale:      var(--tomato);
  --accent-warm:      var(--carrot);
  --accent-highlight: var(--squash);
  --accent-deep:      var(--beet);

  --focus-ring:       var(--green-500);

  /* ---- Typography ---- */
  --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-hand:    'Caveat', 'Bricolage Grotesque', cursive;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   800;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   21px;
  --text-xl:   26px;
  --text-2xl:  33px;
  --text-3xl:  42px;
  --text-4xl:  54px;
  --text-5xl:  70px;
  --text-6xl:  92px;

  --lh-tight:   1.02;
  --lh-snug:    1.15;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --ls-tight:  -0.02em;
  --ls-snug:   -0.01em;
  --ls-normal: 0;
  --ls-wide:   0.06em;

  /* ---- Spacing — 4px base grid ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---- Radii — soft, friendly, hand-cut ---- */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* ---- Shadows — warm, low, soft ---- */
  --shadow-sm:  0 1px 2px rgba(36, 31, 24, 0.06);
  --shadow-md:  0 6px 18px rgba(36, 31, 24, 0.10);
  --shadow-lg:  0 18px 40px rgba(36, 31, 24, 0.14);
  --shadow-brand: 0 12px 28px rgba(49, 91, 31, 0.22);
  --shadow-sale:  0 12px 26px rgba(217, 67, 43, 0.28);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;

  /* ---- Layout ---- */
  --container:  1180px;
  --gutter:     var(--space-6);
}