/* ==========================================================================
   Shelves design tokens — LOCKED v1.0, 28 Aug 2026
   --------------------------------------------------------------------------
   Values come from the locked design system on the Claude Design canvas
   ("Organic", reskinned to Parchment). Source of truth: the canvas
   Design system files/styles.css — a copy sits at
   ../design-system-locked-v1.css in this theme for reference.
   Nothing else in this theme hard-codes a colour, font or spacing step.
   ========================================================================== */

:root {
  /* Type ------------------------------------------------------------------ */
  --es-font-display: "Marcellus", Georgia, serif;
  --es-font-body: "Mukta", system-ui, sans-serif;
  --es-font-script: "Tiro Devanagari Sanskrit", serif; /* watermark only */

  --es-size-hero: clamp(2.5rem, 5vw, 4rem);
  --es-size-h1: clamp(2rem, 3.5vw, 3rem);
  --es-size-h2: 1.5rem;
  --es-size-body: 1rem;
  --es-size-small: 0.8125rem;
  --es-size-eyebrow: 0.75rem;

  --es-tracking-eyebrow: 0.14em;
  --es-leading-body: 1.7;

  /* Colour — Parchment ----------------------------------------------------- */
  --es-paper: #f1eadc;        /* --color-bg */
  --es-paper-alt: #ede4d0;    /* --color-surface */
  --es-canvas: #dcd2be;       /* --color-canvas, deepest paper band */
  --es-ink: #23201a;          /* --color-text */
  --es-ink-soft: #5c554a;     /* neutral-700, muted text ≥ 4.5:1 on paper */
  --es-header-bg: #33261a;    /* accent-800, the dark umber header band */
  --es-header-ink: #fbf6e9;   /* accent-100, cream on umber */
  --es-gold: #a9822f;         /* --color-accent-2, brass */
  --es-rule: color-mix(in srgb, #23201a 14%, transparent); /* --color-divider */

  /* Umber ramp (dominant voice; 700–900 = header + primary button) */
  --es-umber-100: #fbf6e9; --es-umber-200: #eadfc6; --es-umber-300: #dccfae;
  --es-umber-400: #b4a483; --es-umber-500: #83744f; --es-umber-600: #6e6045;
  --es-umber-700: #4a3826; --es-umber-800: #33261a; --es-umber-900: #241a11;

  /* Brass ramp (rules, hairline emphasis, the gold underline) */
  --es-brass-100: #fcf4e2; --es-brass-200: #f3e6c6; --es-brass-300: #e6d3a2;
  --es-brass-400: #cfb069; --es-brass-500: #a9822f; --es-brass-600: #8c6a22;
  --es-brass-700: #6d521a; --es-brass-800: #4d3a13; --es-brass-900: #31250d;

  /* Sage ramp (quiet third voice: in-stock dots, progress fills) */
  --es-sage-100: #eff3e6; --es-sage-300: #c3d0ad; --es-sage-500: #6f8a55;
  --es-sage-700: #4a6039; --es-sage-900: #212c19;

  /* Clay red (errors) */
  --es-error-100: #fdeeeb; --es-error-300: #efb5ac; --es-error-500: #bd6558;
  --es-error-700: #7c352b; --es-error-900: #381612;

  /* Semantic — always these for status meaning, never a raw ramp step */
  --es-success: var(--es-sage-700);
  --es-success-tint: var(--es-sage-100);
  --es-error: var(--es-error-700);
  --es-error-tint: var(--es-error-100);
  --es-warn: var(--es-brass-700);
  --es-warn-tint: var(--es-brass-100);

  /* Spacing — 1.10 density scale from the locked system ------------------- */
  --es-space-1: 4.4px;
  --es-space-2: 8.8px;
  --es-space-3: 13.2px;
  --es-space-4: 17.6px;
  --es-space-5: 26.4px;   /* system --space-6 */
  --es-space-6: 35.2px;   /* system --space-8 */
  --es-space-7: 52.8px;   /* system --space-12, band padding */
  --es-space-8: 70.4px;   /* system --space-16, major break */

  /* Radii & elevation ------------------------------------------------------ */
  --es-radius: 2px;       /* --radius-sm; quiet 2–3px geometry, never rounder */
  --es-radius-md: 3px;
  --es-radius-lg: 16px;   /* dialogs only */
  --es-shadow-sm: 0 1px 2px color-mix(in srgb, #241a11 12%, transparent);
  --es-shadow-md: 0 3px 10px color-mix(in srgb, #241a11 15%, transparent);
  --es-shadow-lg: 0 40px 90px -30px color-mix(in srgb, #241a11 40%, transparent);

  /* Dark umber band (footer, collection tiles, statement hero) ------------ */
  --es-band-bg: #2a2016;
  --es-band-ink: #c4b392;
  --es-band-ink-strong: #e5d8bb;
  --es-band-ink-dim: #9c8862;
  --es-band-rule: #3e3124;
  --es-band-gold: #d8c49b;

  /* Layout ----------------------------------------------------------------- */
  --es-measure: 62ch;
  --es-container: 1280px; /* system max content measure */
}

/* Contrast rules from the locked system:
   - Primary CTA fills umber-800 with cream (--es-header-ink) text.
   - Muted ink is never lighter than --es-ink-soft (neutral-700).
   - Brass is for rules and hairlines, not body text; paragraph-size accent
     text uses --es-umber-700.
   - Product photographs are never washed/filtered; editorial imagery only.
   - Prices set in Mukta 700 with font-variant-numeric: tabular-nums,
     never in Marcellus.
   - Breakpoints: 480 / 768 / 1024 / 1280. Below 480 every interactive
     element grows to a 44px touch target. */