/* ==========================================================================
   Suvarna Natural Farms — Design Tokens
   Original design system. Warm-ivory / espresso / terracotta editorial palette.
   ========================================================================== */

:root {
  /* ---- Color: primitives (Suvarna Natural Farms palette) ---- */
  --ivory:        #F8F5EC;  /* warm cream — page background */
  --paper:        #FFFFFF;  /* white — raised surfaces / cards */
  --sand:         #EFE9DB;  /* subtle beige fill */
  --espresso:     #2C2C2C;  /* dark charcoal — primary ink */
  --charcoal:     #3A3A3A;
  --terracotta:   #1F5D3A;  /* deep forest green — primary brand */
  --terracotta-2: #17492D;  /* darker green — hover */
  --olive:        #6F8F3D;  /* olive green — secondary */
  --gold:         #C9A227;  /* harvest gold — accent */
  --gold-2:       #E0C15A;  /* lighter gold — on dark surfaces */
  --muted:        #6B6B60;  /* muted text on light */
  --muted-dark:   #C4D3C2;  /* muted text on dark green */
  --border:       #E8E2D5;  /* light beige border */
  --border-dark:  #2F5C42;  /* subtle divider on dark green */
  --white:        #FFFFFF;

  /* ---- Color: semantic ---- */
  --bg:            var(--ivory);
  --surface:       var(--paper);
  --ink:           var(--espresso);
  --ink-soft:      var(--muted);
  --primary:       var(--terracotta);
  --primary-hover: var(--terracotta-2);
  --accent:        var(--gold);
  --line:          var(--border);
  --focus:         var(--primary);

  /* dark-section semantics */
  --bg-dark:       var(--terracotta-2);
  --ink-on-dark:   #F3F1E8;
  --ink-on-dark-soft: var(--muted-dark);
  --line-on-dark:  var(--border-dark);

  /* ---- Typography ---- */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale (clamp: min, preferred, max) */
  --fs-eyebrow: 0.8125rem;                        /* 13px labels */
  --fs-body:    clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-lead:    clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --fs-h6:      clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem);
  --fs-h5:      clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
  --fs-h4:      clamp(1.35rem, 1.1rem + 1.1vw, 2rem);
  --fs-h3:      clamp(1.8rem, 1.4rem + 2vw, 3rem);
  --fs-h2:      clamp(2.4rem, 1.7rem + 3.4vw, 4.5rem);
  --fs-h1:      clamp(3rem, 1.8rem + 6vw, 8rem);
  --fs-display: clamp(3.5rem, 1.5rem + 9vw, 11rem);

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-body:    1.65;
  --tracking-label: 0.22em;
  --tracking-tight: -0.02em;

  /* ---- Spacing scale (standard density, 8pt-based) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --section-y: clamp(4rem, 3rem + 6vw, 9rem);

  /* ---- Layout ---- */
  --container: 1280px;
  --container-wide: 1500px;
  --container-narrow: 820px;
  --gutter: clamp(1.25rem, 0.8rem + 2.2vw, 3.5rem);
  --radius-sm: 4px;
  --radius:    10px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(28, 26, 23, 0.06);
  --shadow:    0 10px 30px -12px rgba(28, 26, 23, 0.18);
  --shadow-lg: 0 30px 60px -20px rgba(28, 26, 23, 0.30);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 600ms;

  /* ---- z-index scale ---- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 40;
  --z-nav: 100;
  --z-drawer: 200;
  --z-overlay: 190;
  --z-loader: 300;
}