/* DES-04 shared storefront design system; scoped to the storefront shell. */
body.sf {
  /* Colour: surfaces */
  --sf-page: #F7F7F2;          /* page background */
  --sf-surface: #FFFFFF;       /* cards, header, product surfaces */
  --sf-mint: var(--sf-page);  /* legacy surface hook: neutral fill keeps dark text contrast */
  --sf-placeholder: #DCE3DC;   /* image placeholder fill (mockup grey-green) */
  --sf-utility: #231F20;       /* near-black strip and primary buttons */
  --sf-footer-bg: #F7F7F2;     /* footer: off-white (mint footer retired) */
  --sf-footer-ink: #231F20;    /* footer text and links: 15.6:1 on --sf-footer-bg */
  --sf-footer-rule: #231F20;   /* footer top divider */

  /* Colour: text */
  --sf-ink: #231F20;           /* body and headings */
  --sf-ink-2: #5D645F;         /* secondary text, metadata */
  --sf-on-dark: #FFFFFF;

  /* Colour: accents and status (always paired with words, never colour alone) */
  --sf-magenta: #B40C9B;       /* links, focus ring, small signatures; never a full-page gradient */
  --sf-green: #176A43;         /* confirmed success, selected check */
  --sf-error: #9F2D32;
  --sf-warning: #6F4A00;
  --sf-warning-bg: #FFF3DC;    /* warning notice fill (mockup CT-19 amber notice) */
  --sf-error-bg: #FBECEC;

  /* Colour: lines */
  --sf-divider: #D8DDD7;       /* dividers only: 1.38:1 on white, never the only boundary of a control */
  --sf-outline: #788279;       /* input and control outlines: 3.99:1 on white */

  /* Focus: 2 px magenta ring separated by a 2 px white gap. Selected state is not focus. */
  --sf-focus: #B40C9B;
  --sf-focus-gap: #FFFFFF;

  /* Type: Poppins only (self-hosted, fonts/). Weights shipped: 400, 600, 700 (+ italics). */
  --sf-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --sf-w-body: 400;
  --sf-w-control: 600;         /* prompts ask for "medium" controls; 500 is not shipped, so 600 */
  --sf-w-heading: 700;
  --sf-fs-meta: 14px;
  --sf-fs-body: 16px;
  --sf-fs-lead: 18px;
  --sf-fs-h3: 20px;
  --sf-fs-h2: 28px;
  --sf-fs-h1: 38px;            /* desktop page heading 34-40 px */
  --sf-fs-h1-m: 28px;          /* mobile page heading 26-30 px */
  --sf-fs-hero: 56px;          /* desktop hero 52-60 px */
  --sf-fs-hero-m: 32px;
  --sf-lh: 1.5;
  --sf-lh-tight: 1.15;

  /* Space: 8 px rhythm */
  --sf-s1: 4px;
  --sf-s2: 8px;
  --sf-s3: 16px;
  --sf-s4: 24px;
  --sf-s5: 32px;
  --sf-s6: 48px;
  --sf-s7: 64px;

  /* Shape */
  --sf-radius: 8px;            /* controls */
  --sf-radius-card: 12px;      /* cards, panels */
  --sf-radius-pill: 999px;     /* search field */
  --sf-shadow: 0 1px 2px rgba(35, 31, 32, 0.06), 0 2px 8px rgba(35, 31, 32, 0.04);

  /* Size */
  --sf-control: 48px;          /* buttons and inputs 44-48 px */
  --sf-control-min: 44px;      /* minimum target */
  --sf-content: 1360px;        /* desktop content grid */
  --sf-gutter: 120px;          /* desktop outer margin at 1600 */
  --sf-gutter-m: 16px;         /* mobile side gutter */
  --sf-header: 80px;
  --sf-header-m: 60px;
  --sf-utility-h: 28px;
  --sf-sidebar: 240px;         /* facet sidebar */
}