/* ══════════════════════════════════════════════════════════════════════════════
   PALETTE — Graphic Reflections                              loaded AFTER kit.css
   Copy this to the site as assets/css/palette.css and fill it in.

   THE ONE RULE: every colour below has to come from something that physically
   exists at the client's business. Their sign, their walls, their uniforms, their
   packaging, the light in their room. Not a palette generator, not a mood board,
   not "spa colours."

   Being able to name the fixture is the whole difference between a site that
   looks like theirs and a site that looks like a template with their logo on it.
   Write the source in the comment beside each value. If you cannot name it, you
   have not looked at their photos long enough.
   ══════════════════════════════════════════════════════════════════════════════ */
:root{
  /* ── the ground ─────────────────────────────────────────────────────────────
     Near-black, pulled from the client's own darkest brand colour. Not #000 and
     not a neutral grey: a very dark version of a colour they actually own. */
  --ground:#0F160E;        /* SOURCE: ...                                        */
  --panel:#182116;         /* one step up, for alternating bands                 */
  --panel-2:#1E2A1C;       /* two steps up                                       */
  --ink:#1B2419;           /* their darkest brand colour, for light-page bits    */
  --ink-2:#2E3B29;
  --ink-3:#4A5A42;

  /* ── the two light sources ──────────────────────────────────────────────────
     These are the "neon". One warm, one cool, both taken off real fixtures. They
     light every band, glow the small type, and ignite the card edges on hover. */
  --lume:#E2B87A;          /* WARM.  SOURCE: ...                                 */
  --lume-hot:#F0CE9A;      /* the same colour, brighter, for hover states        */
  --lume-2:#7FA6D6;        /* COOL.  SOURCE: ...                                 */

  /* ── accents on the light layer ─────────────────────────────────────────── */
  --accent:#B08D57;
  --accent-lt:#C9A96A;
  --accent-2:#8A9A7B;
  --mark:#6FA344;          /* logo mark only. never type, never UI               */

  /* ── paper and type ─────────────────────────────────────────────────────── */
  --paper:#F7F3EA;
  --paper-2:#FFFDF7;
  --line:#E2DACB;
  --body:#3D453A;
  --muted:#6E7768;
  --txt:rgba(242,240,231,.86);
  --txt-2:rgba(242,240,231,.66);   /* CHECK THIS ON THE REAL GROUND. beat 7:1 */

  /* ── edges ──────────────────────────────────────────────────────────────────
     Derived from --lume. If you change --lume, change these to match or the card
     borders will be the wrong colour and nothing will look wrong enough to spot. */
  --edge:rgba(226,184,122,.16);
  --edge-hot:rgba(226,184,122,.42);
  --hair:rgba(176,141,87,.22);
  --glow-a:rgba(176,141,87,.22);
  --glow-b:rgba(122,150,104,.17);

  /* ── type ───────────────────────────────────────────────────────────────────
     A display serif and a quiet sans is the default that reads expensive. Change
     the faces, never the sizes: the sizes are floors set for an older audience. */
  --serif:"Cormorant Garamond",'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --sans:"Jost",-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  --wrap:1180px;

  /* ── luxury grammar knobs (client-site-design skill, reference/luxury-grammar.md) ──
     --btn-r: 100px pills (Goldust, Blacklane camp) or 3px square (Aman, Dishoom, CRISP
     camp). Nothing in between: the 8 to 14px radius is the one the luxury set never
     puts on a button. --display: the hero line, luxury median 5.4vw at 1440. Leave it
     unless the client's sign demands wider or narrower. */
  --btn-r:100px;
  --display:clamp(2.6rem,5.4vw,5.5rem);
}

/* CONTRAST GATE — do not skip this.
   Dark grounds flatter text that is actually too dim, so eyeballing it does not work.
   Compute --txt and --txt-2 against --ground before shipping. Target 12:1 on body
   and 7:1 on secondary, not the 4.5:1 legal floor. This audience skews older. */

/* ── from the 08-shops-retail recipe (2026-10-01): the starting points, each to be re-sourced from THEIR fixtures ── */
:root{
  --paper:#F7F3EA;
  --btn-r:3px;          /* square camp on the measured sites */
  --display:clamp(2.6rem,4vw,5.8rem);
  --serif:"Lato","Lato Fallback",Arial,sans-serif;
  --sans:"Jost","Jost Fallback",Arial,sans-serif;
  /* --cond: a condensed label face if their brand has one; --accent-txt: the accent deepened to 6.5:1 on paper; --stone: one step warmer than paper */
}

/* ── GRAPHIC REFLECTIONS, her brand (re-sourced 2026-10-06 from her own logo, _src/gr-logo.png, at her ask on the 10/6 call:
   "our actual brand colors ... a purple and an orange"). The logo is a violet G and an orange R, each stitched in the
   other's colour, lettered in deep teal. Every value is named for the thing it was sampled from. ── */
:root{
  --paper:#F5F1EA;          /* undyed linen, the ground of her pillow work */
  --paper-2:#FBF9F5;
  --stone:#ECE5D9;          /* burlap of the Farmhouse pillow, lifted */
  --line:#DDD3C3;
  --ink:#00404F;            /* the teal lettering of her logo (sampled #00404F): 10.1:1 on paper */
  --ink-2:#0B4A59;
  --body:#12313A;           /* the logo teal, deepened for copy: 12.2:1 on paper */
  --muted:#3F565C;          /* teal grey, 7.4:1 on paper */
  --violet:#6633FF;         /* the G of her logo (sampled #6633FF): display italics only, 5.4:1 */
  --accent:#F6650B;         /* the R of her logo (sampled #F6650B): stitches, rules and fills, never type */
  --accent-txt:#4C1FCC;     /* the logo violet deepened for small type: 7.9:1 on paper, 7.1:1 on stone */
  --accent-lt:#F58A45;      /* the orange, lifted, for underlines and focus */
  --btn:#5224DB;            /* the logo violet, one step deeper, for buttons: white on it 7.6:1 */
  --btn-hot:#4519BA;
  --orange-big:#E55C0A;     /* the logo orange, one hair deeper so a display word clears 3:1 on paper (3.2:1) */
  --orange-deep:#B24305;    /* the orange deepened for glyphs (stars): 5.0:1 on paper */
  --wood:#C9A77A; --wood-dk:#8F6C42;   /* the embroidery hoop */
  --shade:0,64,79;          /* shadow tint: the logo teal */
  --serif:"DM Serif Display","DM Serif Display Fallback",Georgia,serif;
  --sans:"Karla","Karla Fallback",Arial,sans-serif;
  --btn-r:3px;
  --wrap:1240px;
  --nav-h:92px;
}