/* ==========================================================================
   Lamps and Plants — design tokens
   Lifted verbatim from "Lamps and Plants Brandbook", section 07.
   Drop this block into theme.liquid or a Tailwind config at build time.
   ========================================================================== */

:root {
  /* --- Colour: core ------------------------------------------------------ */
  --c-canopy:      #24402F;   /* primary — headers, footers, primary buttons */
  --c-canopy-deep: #1B3124;   /* primary hover                               */
  --c-spectrum:    #E8A33D;   /* the light itself — accents, glows, focus    */
  --c-halo:        #F6E7C8;   /* soft amber wash                             */
  --c-linen:       #FAF7F1;   /* default page canvas. never #FFF             */
  --c-paper:       #FFFDF8;   /* raised surfaces — inputs, cards on linen    */
  --c-ink:         #1C2118;   /* body text. a green-black, not a grey        */

  /* --- Colour: support & state ------------------------------------------ */
  --c-moss:        #5C7A5E;   /* success, progress                           */
  --c-clay:        #C86B4A;   /* sale + urgency ONLY. never brand            */
  --c-clay-deep:   #8A5A16;   /* clay text on halo                           */
  --c-sand:        #EFEAE0;   /* recessed panels                             */
  --c-line:        #E3DCCF;   /* hairlines                                   */
  --c-line-strong: #C9BFA9;   /* button outlines on sand                     */
  --c-stone:       #8A8172;   /* muted labels                                */
  --c-ink-soft:    #4A4739;   /* secondary body copy                         */
  --c-ink-mid:     #2E3327;   /* long-form article body                      */
  --c-ink-quiet:   #6A6455;   /* captions                                    */

  /* --- Colour: the light itself ------------------------------------------
     Shared by the logo's glow and the hero's lens flare so the two read as
     the same light source. Bare RGB triples, for rgba(var(--x), alpha). */
  --flare-core:  255, 252, 244;   /* warm white at the source        */
  --flare-warm:  255, 232, 190;   /* the falloff around it           */
  --flare-amber: 232, 163, 61;    /* brand amber, out at the edges   */
  --flare-cool:  140, 190, 150;   /* one cool ghost, as glass does   */

  /* --- Colour: on dark --------------------------------------------------- */
  --c-cream:       #F6F2E9;
  --c-cream-72:    rgba(246, 242, 233, .72);
  --c-cream-60:    rgba(246, 242, 233, .60);
  --c-cream-42:    rgba(246, 242, 233, .42);
  --c-cream-16:    rgba(246, 242, 233, .16);

  /* --- Type -------------------------------------------------------------- */
  --f-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --f-ui:      'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --f-mono:    var(--f-ui);   /* was JetBrains Mono — see the note below */

  /* Two jobs that both used to be mono, now split:
     --f-label is the small tracked uppercase eyebrow (section numbers,
     column headings, breadcrumbs, badges) — set in the UI sans.
     --f-mono is the figure role: prices, the countdown, spec numbers,
     order ids. It is no longer monospaced — it is the UI sans with tabular
     numerals, so digits still line up in the countdown and cart totals
     without a third typeface on the page. */
  --f-label: var(--f-ui);

  /* Fluid display sizes — the 88px desktop ceiling, safe on a 360px phone.  */
  --t-display-xl: clamp(46px, 7.2vw, 88px);
  --t-display-lg: clamp(40px, 5.6vw, 70px);
  --t-display-md: clamp(34px, 4.2vw, 56px);
  --t-display-sm: clamp(28px, 3.2vw, 46px);
  --t-heading:    clamp(24px, 2.4vw, 34px);

  /* --- Radius ------------------------------------------------------------ */
  --r-sm:   4px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-pill: 999px;

  /* --- Space: 4px base scale -------------------------------------------- */
  --sp-1:   4px;  --sp-2:   8px;  --sp-3:  12px;  --sp-4:  16px;
  --sp-6:  24px;  --sp-8:  32px;  --sp-12: 48px;  --sp-16: 64px;
  --sp-24: 96px;

  /* Page gutter + max width. 88px desktop, 20px mobile, 1440px cap.        */
  --gutter: 88px;
  --maxw: 1440px;
  --maxw-mid: 1280px;
  --maxw-narrow: 1080px;
  --maxw-prose: 760px;

  /* Sections breathe at 120px; dense commerce blocks at 72px.              */
  --section-y: clamp(64px, 8vw, 118px);
  --section-y-tight: clamp(48px, 5.5vw, 72px);

  /* --- Elevation --------------------------------------------------------- */
  --e-card:    0 2px 10px rgba(28, 33, 24, .06);
  --e-overlay: 0 18px 46px rgba(28, 33, 24, .14);
  --e-modal:   0 30px 80px rgba(28, 33, 24, .30);

  /* --- Motion ------------------------------------------------------------ */
  --t-micro:   140ms cubic-bezier(.4, 0, .2, 1);
  --t-control: 220ms cubic-bezier(.22, 1, .36, 1);
  --t-reveal:  700ms cubic-bezier(.22, 1, .36, 1);
  --t-drawer:  420ms cubic-bezier(.16, 1, .3, 1);

  /* --- Layering ---------------------------------------------------------- */
  --z-header:  60;
  --z-sticky:  70;
  --z-drawer:  90;
  --z-modal:   95;
  --z-toast:   98;
}

@media (max-width: 1100px) { :root { --gutter: 40px; } }
@media (max-width: 700px)  { :root { --gutter: 20px; } }