/* ==========================================================================
   Jaggu Jaggery — Design Tokens
   Palette: "Natural & Soft"
   Contrast verified against WCAG 2.1 AA (Aug 2026)
   ========================================================================== */

:root {

  /* --- Core brand palette ------------------------------------------------ */
  --jg-brown:        #5A3A1E;  /* Kolhu Brown  — text, headings, dark surfaces */
  --jg-caramel:      #A66C33;  /* Caramel      — headings, illustration, borders */
  --jg-gold:         #E8C37A;  /* Gud Gold     — highlight blocks, badges */
  --jg-cream:        #F7EFE1;  /* Cream        — page background */
  --jg-green:        #8FBC72;  /* Cane Green   — illustration & decoration ONLY */

  /* --- Action variants ---------------------------------------------------
     The core caramel and green do not reach 4.5:1 behind white text, so
     interactive elements use these deepened versions. Visually identical
     family, accessible in use.                                             */
  --jg-caramel-deep: #96602D;  /* 5.24:1 on white — buttons, links */
  --jg-green-deep:   #476C34;  /* 6.06:1 on white — green text, success, in-stock */

  /* --- Neutrals ----------------------------------------------------------- */
  --jg-white:        #FFFFFF;
  --jg-cream-sunk:   #F1E6D3;  /* recessed panels, input fills, table stripes */
  --jg-green-wash:   #E4E6CD;  /* cane green at 18% over cream — section bands.
                                  Brown text on it: 8.01:1 AAA */
  --jg-line:         rgba(90, 58, 30, 0.14);
  --jg-line-strong:  rgba(90, 58, 30, 0.26);

  /* --- Semantic assignments ----------------------------------------------- */
  --jg-bg:            var(--jg-cream);
  --jg-bg-card:       var(--jg-white);
  --jg-bg-inverse:    var(--jg-brown);

  --jg-text:          var(--jg-brown);                  /* 8.93:1 on cream */
  --jg-text-muted:    rgba(90, 58, 30, 0.72);
  --jg-text-inverse:  var(--jg-cream);
  --jg-text-on-gold:  var(--jg-brown);                  /* 6.08:1 */

  --jg-action:        var(--jg-caramel-deep);
  --jg-action-hover:  #7F5126;
  --jg-action-text:   var(--jg-white);

  --jg-focus:         var(--jg-brown);
  --jg-success:       var(--jg-green-deep);
  --jg-error:         #A33A2E;                          /* 5.30:1 on cream */

  /* --- Type --------------------------------------------------------------- */
  --jg-font-display:  'Fraunces', 'Recoleta', Georgia, serif;
  --jg-font-body:     'Inter', ui-sans-serif, system-ui, sans-serif;

  --jg-text-xs:   0.75rem;    /* 12px */
  --jg-text-sm:   0.875rem;   /* 14px */
  --jg-text-base: 1rem;       /* 16px — minimum body size */
  --jg-text-lg:   1.125rem;   /* 18px */
  --jg-text-xl:   1.5rem;     /* 24px — large-text threshold */
  --jg-text-2xl:  2rem;       /* 32px */
  --jg-text-3xl:  3rem;       /* 48px */
  --jg-text-4xl:  4rem;       /* 64px — hero */

  --jg-leading-tight: 1.15;
  --jg-leading-body:  1.6;

  /* --- Space (4px base) ---------------------------------------------------- */
  --jg-space-1: 0.25rem;
  --jg-space-2: 0.5rem;
  --jg-space-3: 0.75rem;
  --jg-space-4: 1rem;
  --jg-space-5: 1.25rem;
  --jg-space-6: 1.5rem;
  --jg-space-8: 2rem;
  --jg-space-12: 3rem;
  --jg-space-16: 4rem;
  --jg-space-24: 6rem;

  /* --- Radius & elevation --------------------------------------------------- */
  --jg-radius-sm:   6px;
  --jg-radius:      10px;
  --jg-radius-lg:   16px;
  --jg-radius-full: 999px;

  --jg-shadow-sm: 0 1px 2px rgba(90, 58, 30, 0.06);
  --jg-shadow:    0 2px 8px rgba(90, 58, 30, 0.09);
  --jg-shadow-lg: 0 8px 28px rgba(90, 58, 30, 0.13);
}


/* ==========================================================================
   USAGE RULES — read before building
   ==========================================================================

   ✅ SAFE FOR BODY TEXT
      Brown on cream ......... 8.93:1  AAA
      Brown on white ........ 10.20:1  AAA
      Brown on gold .......... 6.08:1  AA
      Brown on green ......... 4.67:1  AA
      Brown on green-wash .... 8.01:1  AAA
      White on caramel-deep .. 5.24:1  AA
      White on green-deep .... 6.06:1  AA
      Green-deep on cream .... 5.31:1  AA
      Green-deep on green-wash 4.77:1  AA

   ⚠️  LARGE TEXT ONLY (24px+, or 18.66px bold)
      Caramel on cream ....... 3.82:1
      White on caramel ....... 4.36:1
      Use for display headings. Never for paragraphs, labels or captions.

   ❌ NEVER AS TEXT
      Green on cream ......... 1.91:1
      White on green ......... 2.19:1
      Gold on cream .......... 1.47:1

      Cane Green is a decorative colour. It belongs in illustration, leaves,
      the mascot and background shapes — never as a text colour and never as
      a button fill behind white type. If green must carry a label, use
      brown text on the green (4.67:1), not white.

   BUTTONS
      Primary   → --jg-action on cream, white label
      Secondary → transparent, 1.5px brown border, brown label
      Tertiary  → brown text link, underlined on hover

   NEVER rely on colour alone to convey state. Pair with an icon, label or
   underline — in-stock/out-of-stock especially.

   FOCUS RINGS
      2px solid var(--jg-focus) with 2px offset. Never remove the outline.

   ========================================================================== */


/* ==========================================================================
   Base
   ========================================================================== */

body {
  background: var(--jg-bg);
  color: var(--jg-text);
  font-family: var(--jg-font-body);
  font-size: var(--jg-text-base);
  line-height: var(--jg-leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--jg-font-display);
  line-height: var(--jg-leading-tight);
  color: var(--jg-text);
}

a {
  color: var(--jg-action);
  text-underline-offset: 3px;
}
a:hover { color: var(--jg-action-hover); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--jg-focus);
  outline-offset: 2px;
}


/* ==========================================================================
   Components
   ========================================================================== */

.jg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--jg-space-2);
  min-height: 44px;                 /* touch target floor */
  padding: var(--jg-space-3) var(--jg-space-6);
  background: var(--jg-action);
  color: var(--jg-action-text);
  font-family: var(--jg-font-body);
  font-size: var(--jg-text-base);
  font-weight: 600;
  border: none;
  border-radius: var(--jg-radius-sm);
  cursor: pointer;
  transition: background 0.16s ease;
}
.jg-btn:hover { background: var(--jg-action-hover); }

.jg-btn--secondary {
  background: transparent;
  color: var(--jg-text);
  border: 1.5px solid var(--jg-line-strong);
}
.jg-btn--secondary:hover {
  background: var(--jg-cream-sunk);
  border-color: var(--jg-brown);
}

.jg-card {
  background: var(--jg-bg-card);
  border: 1px solid var(--jg-line);
  border-radius: var(--jg-radius);
  padding: var(--jg-space-6);
  box-shadow: var(--jg-shadow-sm);
}

.jg-badge {
  display: inline-block;
  padding: var(--jg-space-1) var(--jg-space-3);
  background: var(--jg-gold);
  color: var(--jg-text-on-gold);
  font-size: var(--jg-text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--jg-radius-full);
}

.jg-section--inverse {
  background: var(--jg-bg-inverse);
  color: var(--jg-text-inverse);
}
.jg-section--inverse h1,
.jg-section--inverse h2,
.jg-section--inverse h3 { color: var(--jg-cream); }
.jg-section--inverse a  { color: var(--jg-gold); }   /* 5.24:1 on brown */

.jg-section--highlight {
  background: var(--jg-gold);
  color: var(--jg-text-on-gold);
}


/* ==========================================================================
   Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}