/* ============================================================
   khf-theme-1.css — design-token scaffolding (ZERO visual change)
   ============================================================
   Stage 2 of docs/redesign-implementation-plan.md.

   This file only DEFINES tokens — it restyles nothing, so deploying it
   cannot change the site. Every value below is the site's CURRENT color,
   inventoried from backend-css.css (usage counts in comments). Existing
   rules keep their hardcoded colors until they're migrated to var()
   references one template at a time; new CSS must use the tokens.

   DEPLOY: upload via the backend file manager, then add to the header
   (back-office), loaded AFTER the platform CSS + backend CSS:
     <link rel="stylesheet" href="/cid3748/css/20220/khf-theme-1.css">
   ROLLBACK: remove/repoint the <link> tag.

   THEME SWAP: khf-theme-2-heritage-teal.css redefines the same tokens
   with the redesign palette — swapping themes is a one-tag repoint once
   rules reference the tokens. Seasonal packs work the same way.
   ============================================================ */

:root {
  /* ---- brand ---- */
  --khf-brand:        #3a7585;  /* slate-teal: links, accents (x25 in backend css) */
  --khf-brand-strong: #0093cc;  /* MicroD blue: borders, CTAs (x5 + rgb form x4) */
  --khf-brand-soft:   #26abdb;  /* light blue: delivery calc, links in JS-injected CSS */
  --khf-accent:       #ee3b42;  /* KEY red: sale, buttons (x10; #e63b43 variant x1) */
  --khf-success:      #23b22d;  /* green: in-stock / success (x5) */

  /* ---- text ---- */
  --khf-ink:          #2a2a2a;  /* body text (x34 — the MicroD "dominant color") */
  --khf-ink-soft:     #393939;  /* secondary text (x12) */
  --khf-muted:        #696969;  /* de-emphasized text (x4; #777 x3, #999 x5) */

  /* ---- surfaces ---- */
  --khf-bg:           #ffffff;  /* page background (x30) */
  --khf-surface:      #f3f3f3;  /* cards / tints (x10) */
  --khf-line:         #e1e1e1;  /* borders (x16; #dedede x12, #d1d1d1 x4, #ccc x8) */

  /* ---- effects ---- */
  --khf-shadow:       rgba(0, 0, 0, 0.2);  /* box shadows (x8) */

  /* ---- type ---- */
  --khf-sans:         "Raleway", Arial, sans-serif;  /* dominant (x38 incl. variants) */
  --khf-serif:        Georgia, "Times New Roman", serif;  /* placeholder: no serif in use today */

  /* ---- motion ---- */
  --khf-ease:         cubic-bezier(.22, .9, .32, 1);
  --khf-fast:         .2s;
  --khf-slow:         .45s;
}

/* Dark-mode plumbing: inert until (a) something sets data-theme="dark" and
   (b) rules reference the tokens. Values are drafts — tuned in Stage 4. */
html[data-theme="dark"] {
  --khf-ink:      #ecebe6;
  --khf-ink-soft: #cfcabf;
  --khf-muted:    #9b948b;
  --khf-bg:       #15181a;
  --khf-surface:  #22272a;
  --khf-line:     #343a3d;
  --khf-shadow:   rgba(0, 0, 0, 0.5);
}