/* ═══════════════════════════════════════════════════════════════════════════
   STITCHA DESIGN KIT — the niche theme contract
   ───────────────────────────────────────────────────────────────────────────
   Every niche is defined by the --dk-* values below. The engine (styles.css)
   and each niche skin reference these tokens; nothing downstream should
   hardcode a brand colour or typeface.

   To create a new niche, override this block in ONE of two places:
     • css/skins/<niche>/skin.css — static, ships with the build (generated from niches.manifest.mjs)
     • the shop config API      — shop-config.js applies config.theme.* as
                                  --dk-* at runtime (per ?shop=…)

   Universal primitives (neutral greys, shadows, spacing) live in styles.css
   :root — those don't change between niches, so they're NOT repeated here.

   The defaults below ARE the Stitcha Yachting palette, so extracting these
   tokens renders the current site identically — a visual no-op.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{

  /* ── Accent ramp — the niche's signature colour (actions, highlights) ──
     Canonical value is the RGB triple, so the solid AND every tint track one
     source. To recolour the whole ramp, change --dk-accent-rgb (e.g. 139,94,52). */
  --dk-accent-rgb:    156,127,67;
  --dk-accent:        rgb(var(--dk-accent-rgb));       /* primary action: buttons, active state */
  --dk-accent-deep:   #836a37;                         /* hover / pressed */
  --dk-accent-bright: #c2a86a;                         /* thin highlights, dashed borders, eyebrows */
  --dk-accent-tint:   rgba(var(--dk-accent-rgb),0.12); /* 12% wash behind accents */
  --dk-accent-tint-2: rgba(var(--dk-accent-rgb),0.06); /* 6% subtle wash */
  --dk-accent-line:   rgba(194,168,106,0.4);           /* hairline rule (accent-bright tone) */

  /* ── Ink surfaces — the dark "mood" (hero, dark homepage, dark bars) ──
     --dk-ink-rgb is canonical so dark washes rgba(var(--dk-ink-rgb),α) track it. */
  --dk-ink-rgb:       10,13,16;
  --dk-ink:           rgb(var(--dk-ink-rgb));  /* darkest background */
  --dk-ink-2:         #0e1217;                /* raised dark surface */
  --dk-ink-3:         #141922;                /* raised dark surface (more) */
  --dk-on-ink:        #e8e9ea;                /* primary text on ink */
  --dk-on-ink-dim:    rgba(255,255,255,0.64); /* secondary text on ink */
  --dk-on-ink-faint:  rgba(255,255,255,0.42); /* tertiary text on ink */
  --dk-line:          rgba(255,255,255,0.08); /* subtle divider on ink */
  --dk-line-2:        rgba(255,255,255,0.16); /* stronger divider on ink */

  /* ── Paper surfaces — the light "editorial" mood (Lookbook, Atelier) ── */
  --dk-paper:         #fbfaf7;                /* warm paper background */
  --dk-paper-tile:    #f1ede6;                /* tile / inset on paper */
  --dk-paper-ink:     #0a0d10;                /* text on paper */
  --dk-paper-dim:     #8a8480;                /* muted text on paper */

  /* ── Typography — the two niche typefaces ── */
  --dk-serif:         'Playfair Display', Georgia, serif;  /* display / headings */
  --dk-sans:          'DM Sans', system-ui, sans-serif;    /* body / UI */

  /* ── Base-engine bridge — make styles.css's accent the niche accent ──
     The shared flow (steps 2-4) themes off --red/--red-h/--red-light. Pointing
     them at the kit means a niche's accent reaches the WHOLE app, not just its
     homepage. A shop can still override --red directly via config theme.primary.
     (Pages that don't load this kit, e.g. store.html, keep styles.css's red.) */
  --red:       var(--dk-accent);
  --red-h:     var(--dk-accent-deep);
  --red-light: rgba(var(--dk-accent-rgb),0.08);

  /* Legacy yachting --accent* aliases, bridged to the kit so the shared Step-3
     customiser layer (css/customiser.css) resolves them on EVERY niche — they
     were previously defined only in the yachting skin's :root. */
  --accent:        var(--dk-accent);
  --accent-deep:   var(--dk-accent-deep);
  --accent-bright: var(--dk-accent-bright);
  --accent-tint:   var(--dk-accent-tint);
  --accent-tint-2: var(--dk-accent-tint-2);
}