/* ===================================================================
   GABAYA — v2 canvas theme.

   The palette from `GABAYA Canvas.dc.html` (Claude Design handoff,
   design system `classical-c697e45a`). It overrides the token block in
   design-system.css rather than editing it, so the original Classical
   palette is one <link> away: drop this file from the layout and the
   site returns to gold-on-cream.

   Two things the canvas specifies that are NOT taken here:

   1. The canvas loads Cormorant Garamond + Lora. The pairing stays
      Cormorant + Jost by explicit instruction — Jost holds the 0.18em
      tracking on 11px eyebrows and buttons that this design leans on
      heavily, which a second serif does not. See ASSUMPTIONS §2.7.
   2. The canvas hard-codes ratings, review counts and MRPs on every
      product. Those are mock data; nothing here invents them.
   =================================================================== */

:root {
  /* --- Ground and ink ------------------------------------------- */
  --color-bg: #ffffff;
  --color-surface: #f3f5ec;          /* pale sage — the plate behind product shots */
  --color-text: #101107;
  --color-divider: color-mix(in srgb, #101107 15%, transparent);

  /* --- Accent: olive, replacing the Classical gold --------------- */
  --color-accent: #6f7a37;
  --color-accent-100: #f2f5e6;
  --color-accent-200: #e2e8ca;
  --color-accent-300: #c9d3a2;
  --color-accent-400: #a9b678;
  --color-accent-500: #8c9a52;
  --color-accent-600: #75813b;
  --color-accent-700: #5b6530;
  --color-accent-800: #414823;
  --color-accent-900: #282d16;

  /* The Classical system carries a second accent role that resolves to
     the same hue. Kept in step so both sets stay usable. */
  --color-accent-2: #6f7a37;
  --color-accent-2-100: #f2f5e6;
  --color-accent-2-200: #e2e8ca;
  --color-accent-2-300: #c9d3a2;
  --color-accent-2-400: #a9b678;
  --color-accent-2-500: #8c9a52;
  --color-accent-2-600: #75813b;
  --color-accent-2-700: #5b6530;
  --color-accent-2-800: #414823;
  --color-accent-2-900: #282d16;

  /* --- Neutrals: warmed very slightly toward the olive ----------- */
  --color-neutral-100: #fbfbf7;
  --color-neutral-200: #eef0e8;
  --color-neutral-300: #dcdfd3;
  --color-neutral-400: #bdc1b3;
  --color-neutral-500: #9a9e90;
  --color-neutral-600: #777b6e;
  --color-neutral-700: #565a4f;
  --color-neutral-800: #33362d;
  --color-neutral-900: #14150e;

  /* Shadows are retuned to the new near-black; the Classical values
     were mixed against a warm grey and read muddy on white. */
  --shadow-sm: 0 1px 2px rgba(16, 17, 7, 0.06);
  --shadow-md: 0 3px 10px rgba(16, 17, 7, 0.08);
  --shadow-lg: 0 12px 32px rgba(16, 17, 7, 0.12);
}

/* The browser chrome should follow the new ground. */
:root { color-scheme: light; }

/* -------------------------------------------------------------------
   Product imagery.

   The canvas mounts every product shot on --color-surface with
   `mix-blend-mode: multiply`. The shoot was lit on near-white, so
   multiplying drops the file's own background out and lets the sage
   plate show through — the bag reads as sitting on the page rather
   than in a box. It only works over the surface colour, so the rule
   is scoped to the plate, never applied globally.
   ------------------------------------------------------------------- */
.gb-plate--product {
  background: var(--color-surface);
  filter: none;                        /* the Classical sepia grade stays off */
}
.gb-plate--product > img,
.gb-plate--product > picture > img {
  mix-blend-mode: multiply;
}

/* A placeholder is flat vector art — multiplying it just dims it. */
.gb-plate--product .gb-ph { mix-blend-mode: normal; }