/* Which Grinder tokens: the one place raw values live. style.css uses tokens only (a test fails on a hex or rgba colour
   there). The site has one look and it is light: a light grey page, white cards, slate ink, deep orange for the one
   action, green only for good, a warm tint band behind the home headline and a warm espresso footer. There is no dark
   mode and no switch for one: color-scheme is light, so the page stays light when the OS is dark.

   Fonts: Bitter for headlines, names and prices (--display), Source Sans 3 for everything else (--sans). Both are
   self-hosted, see fonts.css.

   Roles: --a1* buy or primary action, the featured pick, the selection; --g-* good; --a2-* limited or caution;
   --c-* the calm cons tint; --ink and the slate greys structure; --hero-* the headline band; --foot-* the footer.
   Icons are ink (--icon). */

:root{
  color-scheme:light;

  /* type: families, scale and weights */
  --display:"Bitter",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-2xs:11.5px; --fs-xs:12.5px; --fs-sm:14px; --fs-md:16px; --fs-lg:18px; --fs-xl:20px; --fs-2xl:24px; --fs-3xl:30px; --fs-4xl:40px; --fs-5xl:52px;
  --lh-tight:1.15; --lh-snug:1.3; --lh-body:1.6;
  --track-hero:-.005em; --track-display:0;
  --fw-reg:400; --fw-med:500; --fw-semi:600; --fw-bold:700;

  /* space, radius, icon size */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --r-sm:6px; --r:12px; --r-lg:16px; --r-pill:999px; --rb:var(--r-sm);
  --ic-sm:18px; --ic-md:24px; --ic-lg:32px; --ic-xl:48px;
  --icon:var(--ink);

  /* shadow: neutral black */
  --shadow:0 1px 2px rgba(0,0,0,.05),0 10px 28px -14px rgba(0,0,0,.2);
  --shadow-lg:0 2px 4px rgba(0,0,0,.06),0 24px 48px -20px rgba(0,0,0,.45);
  --shadow-pop:0 16px 32px -14px rgba(0,0,0,.45); --shadow-bar:0 12px 26px -14px rgba(0,0,0,.4);

  /* surfaces and text */
  --paper:#f8fafc; --card:#ffffff; --soft:#f1f5f9;
  --ink:#0f172a; --body:#334155; --muted:#64748b; --line:#e2e8f0; --stone:#cbd5e1;

  /* accent: buy or primary action */
  --a1:#c2410c; --on-a1:#ffffff; --a1-ink:#c2410c; --a1-b:#ea580c; --a1-2:#fdba74; --a1-tint:#fff7ed; --a1-line:#fed7aa;
  --mark:#ffedd5; --mark-ink:#0f172a;

  /* green: good */
  --g-ink:#047857; --g-b:#10b981; --g-fill:#047857; --g-tint:#ecfdf5; --g-line:#a7f3d0; --on-fill:#ffffff;

  /* amber: limited or caution */
  --a2:#b45309; --a2-b:#f59e0b; --a2-2:#fcd34d; --a2-tint:#fffbeb; --a2-line:#fde68a;

  /* stone: the calm cons tint */
  --c-tint:#f6f4f1; --c-line:#e1dcd4; --c-ink:#57534e; --c-dot:#a8a29e;

  /* footer: warm espresso brown */
  --foot-bg:#2b1d15; --foot-line:#4a3427; --on-foot:#fff7ed; --foot-body:#e7d5c3; --foot-muted:#bfa58f;
  --foot-accent:#fdba74; --foot-rule:#7a5f4b;

  /* the dark pill over a video thumbnail, and the opaque stop of a fade mask (alpha only) */
  --scrim:rgba(28,20,16,.85); --on-scrim:#ffffff; --mask:#000000;

  /* hero: the headline band, a soft warm tint with ink text, orange accent words and white pills */
  --hero-bg:#fff6ee; --hero-bg-2:#ffeadb; --on-hero:#0f172a; --hero-body:#475569; --hero-accent:#b3380a;
  --hero-pill-bg:#ffffff; --hero-pill-line:rgba(43,29,21,.16); --hero-glow:rgba(234,88,12,.16);
  --glow:0 10px 30px -10px rgba(234,88,12,.3);
}