/* ================================================================
   SOILSAGE — DESIGN TOKENS
   Dark Lush Garden · Editorial · Organic Precision
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,900;1,400;1,700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ── Core Dark Palette ── */
  --bg:        #0A0F0A;
  --bg-1:      #0F140F;
  --bg-2:      #141A14;
  --bg-3:      #1A211A;
  --bg-4:      #202820;
  --bg-card:   #111611;

  /* ── Text Scale ── */
  --text:      #E2EDD4;
  --text-2:    rgba(226,237,212,0.68);
  --text-3:    rgba(226,237,212,0.42);
  --text-4:    rgba(226,237,212,0.22);

  /* ── Accent: Fresh Green ── */
  --green:        #6DBE47;
  --green-dark:   #52A030;
  --green-light:  #8FD068;
  --green-pale:   #C4E9B0;
  --green-dim:    rgba(109,190,71,0.10);
  --green-border: rgba(109,190,71,0.28);

  /* ── Secondary: Harvest Orange ── */
  --orange:       #D4854A;
  --orange-light: #E8A06A;
  --orange-pale:  #F5C9A0;
  --orange-dim:   rgba(212,133,74,0.12);

  /* ── Earth Tones ── */
  --soil:    #6B4226;
  --moss:    #3D5C2E;
  --bark:    #8B6340;
  --clay:    #B07040;
  --stone:   #5A6050;
  --sky:     #4A7FA5;
  --lavender:#7A6BAE;

  /* ── Borders ── */
  --border:      rgba(226,237,212,0.08);
  --border-2:    rgba(226,237,212,0.15);
  --border-green:rgba(109,190,71,0.30);

  /* ── Category Colors ── */
  --cat-soil:    #B07040; --cat-soil-bg:   rgba(176,112,64,0.12);
  --cat-grow:    #6DBE47; --cat-grow-bg:   rgba(109,190,71,0.12);
  --cat-water:   #4A7FA5; --cat-water-bg:  rgba(74,127,165,0.12);
  --cat-pest:    #D4854A; --cat-pest-bg:   rgba(212,133,74,0.12);
  --cat-season:  #8FD068; --cat-season-bg: rgba(143,208,104,0.12);
  --cat-tools:   #7A6BAE; --cat-tools-bg:  rgba(122,107,174,0.12);

  /* ── Gradients ── */
  --grad-green:  linear-gradient(135deg,#6DBE47 0%,#52A030 100%);
  --grad-orange: linear-gradient(135deg,#D4854A 0%,#E8A06A 100%);
  --grad-dark:   linear-gradient(180deg,#0F140F 0%,#0A0F0A 100%);
  --grad-glow:   radial-gradient(ellipse 80% 40% at 50% 0%,rgba(109,190,71,0.12) 0%,transparent 65%);
  --grad-card:   linear-gradient(135deg,rgba(255,255,255,0.03) 0%,rgba(255,255,255,0.005) 100%);

  /* ── Typography ── */
  --font-display:'Playfair Display',Georgia,serif;
  --font-body:   'Plus Jakarta Sans',system-ui,sans-serif;

  /* Type Scale */
  --t-2xs:0.625rem; --t-xs:0.75rem;   --t-sm:0.875rem;  --t-base:1rem;
  --t-md:1.125rem;  --t-lg:1.375rem;  --t-xl:1.75rem;   --t-2xl:2.25rem;
  --t-3xl:3rem;     --t-4xl:4rem;     --t-5xl:5.5rem;   --t-6xl:7rem;

  /* ── Spacing ── */
  --s-1:4px;  --s-2:8px;   --s-3:12px;  --s-4:16px;
  --s-5:20px; --s-6:24px;  --s-8:32px;  --s-10:40px;
  --s-12:48px;--s-16:64px; --s-20:80px; --s-24:96px; --s-32:128px;

  /* ── Shape ── */
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-2xl:24px; --r-full:9999px;

  /* ── Layout ── */
  --max-w:1300px; --max-w-narrow:860px;

  /* ── Motion ── */
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-io: cubic-bezier(0.65,0,0.35,1);
  --dur-fast:100ms; --dur-mid:200ms; --dur-slow:360ms; --dur-xslow:600ms;
}