/* Knowledge Focus Connections · design tokens (r73)
   One source for colour, type, space, radius, depth, motion and layering. Every KFC-branded page loads this first:
   the homepage (assets/kfc-home.css), the KFC Lab demo shell (assets/kfc-lab.css) and the entrance pages (kfc-pages.css).
   Demo businesses (roofing, dental, barber) keep their own brand tokens; only their KFC chrome uses these.
   Fonts live in kfc-fonts.css (load it first). Rules: use a token before adding a literal; add a token here before using a new colour twice. */


:root{
  color-scheme:dark;

  /* colour: warm Midwest dusk. Cream on near-black, terracotta for action, sage for "good". */
  --cream:#FBF6EE;            /* text on dark, light surfaces */
  --paper:#F4EAD9;            /* printed things: request slips, cards on dark */
  --dark:#26221D;             /* text on cream */
  --ink:#16130F;              /* page ground */
  --ink-2:#1B1713;            /* raised solid surface (dialogs) */
  --ink-3:#221E19;            /* menus, popovers */
  --terracotta:#C1502E;       /* primary action fill */
  --terra-hover:#D25C38;
  --terra-hi:#E0784F;         /* accent text, focus ring, "watch out" */
  --terra-deep:#9E3F22;       /* accent text on paper */
  --terra-glow:#FFD8C4;
  --green:#35492E;            /* deep sage fill */
  --green-hi:#8FB27E;         /* "good", "yes", verified */
  --muted:rgba(251,246,238,.72);
  --faint:rgba(251,246,238,.6);   /* ≥4.5:1 on every KFC surface (was .46, failed axe) */
  --glass:rgba(22,19,15,.58);  /* panels floating over photos */
  --glass2:rgba(251,246,238,.07);
  --glass3:rgba(251,246,238,.12);
  --edge:rgba(251,246,238,.16);
  --edge2:rgba(251,246,238,.28);
  --wash-terra:rgba(224,120,79,.12);
  --wash-green:rgba(143,178,126,.14);
  --line-terra:rgba(224,120,79,.6);
  --line-green:rgba(143,178,126,.55);

  /* type */
  --display:"Gambetta",Georgia,"Times New Roman",serif;
  --body:"Satoshi","Helvetica Neue",Arial,sans-serif;
  --sans:var(--body);
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --t-micro:10px;   /* mono labels, credits */
  --t-xs:11px;      /* eyebrows */
  --t-sm:13px;      /* captions, fine print */
  --t-base:15px;    /* UI text */
  --t-md:16px;      /* body */
  --t-lg:18px;      /* lede */
  --t-h3:clamp(24px,2.2vw,32px);
  --t-h2:clamp(32px,3.2vw,48px);
  --t-h1:clamp(46px,5.6vw,82px);
  --track-label:.12em;

  /* space (4px base) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:26px; --s-7:36px; --s-8:48px;
  --gut:clamp(16px,2.6vw,36px);

  /* radius */
  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:14px; --r-xl:18px; --r-2xl:22px; --r-pill:999px;

  /* depth */
  --sh-1:0 8px 24px rgba(0,0,0,.4);
  --sh-2:0 18px 40px rgba(0,0,0,.45);
  --sh-3:0 30px 80px rgba(0,0,0,.5);
  --blur-glass:blur(12px);

  /* motion: one family of curves. Use --ease-out for arrivals, --ease-spring only for small press/pop feedback. */
  --ease-out:cubic-bezier(.2,.9,.25,1);
  --ease-spring:cubic-bezier(.3,1.5,.5,1);
  --ease-inout:cubic-bezier(.45,0,.2,1);
  --ease-exit:cubic-bezier(.5,0,.75,0);
  --d-fast:.2s;     /* hover, colour */
  --d-base:.35s;    /* state changes */
  --d-slow:.6s;     /* arrivals */
  --d-scene:1.1s;   /* scene and section changes */
  --stagger:.06s;

  /* layout widths */
  --w-panel:620px; --w-wide:940px; --w-xl:1120px;
  /* breakpoints (documentation only; CSS can't read variables in media queries):
     phone ≤620 · tablet ≤980 · desktop ≥981 · short desktop: min-width 981 and max-height 800 */

  /* layering, low to high */
  --z-amb:2; --z-clock:5; --z-track:10; --z-credit:16; --z-rail:18; --z-demo:19; --z-bar:20; --z-float:21; --z-ticker:22; --z-modal:30; --z-toast:40;
}