/* =====================================================================
   FIRSTHAND SPICES — DESIGN TOKENS
   Aesthetic: quiet modern retail. Near-white paper, forest-green ink,
   gold reduced to a hairline accent. Small controls, thin rules, and
   generous whitespace do the work that ornament used to do.

   Every token NAME here is also used by the older rules in the other
   stylesheets, so re-theming happens by changing values in this file.
   ===================================================================== */

:root {
  /* ---- Brand palette (still derived from the logo, used far more sparingly) ---- */
  --green-900: #12271A;
  --green-800: #17331F;
  --green-700: #173B1F;   /* primary forest */
  --green-600: #2A5233;
  --green-500: #3D6544;
  --green-300: #7E9580;   /* clears 3:1 on paper, so hover borders are visible */
  --green-100: #E2EADF;
  --green-050: #F1F5EF;

  --gold-700: #8A6A24;
  --gold-600: #B88A2A;    /* premium gold */
  --gold-400: #CFAE63;    /* soft gold */
  --gold-200: #E8DCBC;
  --gold-050: #F8F3E5;

  --chilli:   #A8422A;    /* the 2% accent, pulled from the logo's chilli */
  --chilli-050: #FAF0EC;

  /* Surfaces. The old theme sat on a heavy cream; this one sits on
     near-white, and cream survives only as a tint for panels. */
  --paper:     #FCFBF8;
  --cream:     #F6F4ED;
  --cream-deep:#EFEBE1;
  --white:     #FFFFFF;

  --ink:      #1B211C;
  --ink-soft: #47514A;
  --muted:    #657065;    /* 4.7:1 on cream — the old value failed on tinted panels */
  --line:     #E7E5DD;
  --line-soft:#F0EEE7;

  --success:  #2F6B3A;
  --success-bg:#EDF4EE;
  --warning:  #8A6A24;
  --warning-bg:#FAF4E4;
  --danger:   #A8322A;
  --danger-bg:#FBEFED;
  --info:     #2B5566;
  --info-bg:  #EDF3F5;

  /* ---- Typography ----------------------------------------------------
     Playfair Display is the high-contrast serif that premium food and
     hospitality brands lean on: it has real presence at heading sizes and a
     genuinely elegant italic, which the hero's second line uses. DM Sans
     carries everything functional — warmer and less corporate than Inter
     while staying completely plain at small sizes. */
  --font-display: 'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-hindi: 'Tiro Devanagari Hindi', 'Noto Sans Devanagari', var(--font-display);

  /* Two different problems, two different answers. Controls stay small —
     that is what --step--1 and --step--2 drive. Headings need presence on a
     laptop, so the display steps climb well past them again. The phone end
     of every clamp stays modest; it is the desktop end that grew. */
  --step--2: clamp(0.75rem, 0.73rem + 0.08vw, 0.80rem);
  --step--1: clamp(0.85rem, 0.83rem + 0.10vw, 0.92rem);
  --step-0:  clamp(0.97rem, 0.94rem + 0.14vw, 1.06rem);
  --step-1:  clamp(1.08rem, 1.02rem + 0.28vw, 1.28rem);
  --step-2:  clamp(1.25rem, 1.12rem + 0.62vw, 1.70rem);
  --step-3:  clamp(1.50rem, 1.28rem + 1.05vw, 2.25rem);
  --step-4:  clamp(1.80rem, 1.44rem + 1.70vw, 3.00rem);
  --step-5:  clamp(2.15rem, 1.60rem + 2.60vw, 4.00rem);

  /* ---- Space (a 4px-rooted scale) ---- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.375rem; --sp-6: 1.875rem; --sp-7: 2.5rem;   --sp-8: 3.25rem;
  --sp-9: 4.25rem;  --sp-10: 5.5rem;  --sp-11: 7rem;

  --shell: 1240px;
  --shell-narrow: 860px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);

  /* ---- Shape ---------------------------------------------------------
     Small radii throughout. Pills are reserved for badges and counters,
     never for buttons. */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Layered elevation. A single soft blur reads as a smudge; real objects
     cast a tight contact shadow AND a wide ambient one, and stacking the two
     is most of what separates an expensive-looking surface from a flat one.
     Still restrained — this theme leans on rules, with depth as support. */
  --shadow-sm:
    0 1px 1px rgba(27, 33, 28, .04),
    0 1px 2px rgba(27, 33, 28, .05);
  --shadow:
    0 1px 2px rgba(27, 33, 28, .05),
    0 4px 10px -4px rgba(27, 33, 28, .09),
    0 12px 26px -18px rgba(27, 33, 28, .14);
  --shadow-lg:
    0 2px 4px rgba(27, 33, 28, .05),
    0 12px 26px -10px rgba(27, 33, 28, .12),
    0 30px 60px -32px rgba(27, 33, 28, .20);
  --shadow-drawer: -12px 0 40px -24px rgba(18, 39, 26, .28);

  /* A hairline drawn with a shadow instead of a border: it does not take up
     layout space, so a card can gain or lose one on hover without shifting. */
  --ring:      0 0 0 1px rgba(27, 33, 28, .07);
  --ring-gold: 0 0 0 1px color-mix(in srgb, var(--gold-400) 46%, transparent);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  /* A long, late-settling curve for anything large enough to be watched.
     Small controls keep the quicker curves above. */
  --ease-premium: cubic-bezier(.32, .72, 0, 1);
  --dur: .28s;
  --dur-fast: .16s;
  --dur-slow: .48s;

  --header-h: 64px;
  --announce-h: 34px;

  /* The paper grain belonged to the old theme. Keeping the token defined
     means the rules that reference it stay valid while drawing nothing. */
  --grain: none;
}