/* ============================================================================
   mock-brands.css  —  SHARED MOCK-BUSINESS BRAND KIT  (Phase B)
   ----------------------------------------------------------------------------
   Every device SCREEN in the consultancy demo is a DISTINCT fictional business
   with its OWN light/modern brand. This file is the shared kit so the per-screen
   agents COMPOSE a brand instead of reinventing one.

   The page CHROME stays Beaufort-dark (consultancy.css / components.css). ONLY
   the content INSIDE a `.device__screen` opts into a mock brand. Nothing here
   touches the dark tokens, the device frames, the starfield, or any chrome.

   ----------------------------------------------------------------------------
   HOW A SCREEN AGENT APPLIES A BRAND
   ----------------------------------------------------------------------------
   Put a single brand class on the screen-content ROOT inside a device. That
   element becomes a light "page" carrying the brand's vars and base styles:

     <div class="device__screen">
       <div class="mb mb--maker">            <-- brand scope + base surface
         <span class="mb-logo">Your business</span>   <-- typeface-logo
         ... your screen markup, styled with the mb-* vars ...
       </div>
     </div>

   - `.mb` is the BASE: sets a light background, brand text colour, brand body
     font, fills the device screen, owns container-type for cqw sizing, and
     hard-resets the inherited dark figure/eyebrow colours so nothing leaks.
   - `.mb--<brand>` layers that brand's palette + font pairing onto the vars.
   - Build screen styles against the VARS below (never hardcode hex), e.g.
       #s4 .mb .kpi__value { color: var(--mb-text); }
       #s4 .mb .pill       { background: var(--mb-accent); color: var(--mb-on-accent); }
   - Scope your section styles under your section id AND `.mb`/`.mb--brand` so
     two screens sharing a brand (e.g. Greenslate in s4 + s5) can still diverge.

   VARS each brand defines (stable contract — rely on these names):
     --mb-bg          page background (the lightest surface)
     --mb-surface     raised card / panel surface
     --mb-surface-2   secondary / inset surface (subtler than surface)
     --mb-line        hairline / border colour
     --mb-text        primary text (AA on --mb-bg and --mb-surface)
     --mb-text-soft   secondary / muted text (still >= 4.5:1 for body sizes)
     --mb-accent      brand accent (buttons, active states, key figures)
     --mb-accent-2    secondary accent (charts, chips, highlights)
     --mb-on-accent   text/icon colour that sits ON --mb-accent (AA)
     --mb-font-head   display / heading family
     --mb-font-body   body / UI family
     --mb-font-num    numeric/figure family (tabular)
     --mb-radius      brand corner radius
     --mb-shadow      brand soft shadow

   Typeface-logo: `.mb-logo` renders the business name as a clean type wordmark
   in the brand's heading font + accent. Per-brand `.mb--<brand>` tunes weight,
   letter-spacing, case. Variants: `.mb-logo--mark` prepends a tiny brand glyph
   square; `.mb-logo--stack` stacks an optional `.mb-logo__tag` beneath.

   ----------------------------------------------------------------------------
   IMAGE PIPELINE  (Claude-sourced Unsplash -> local WebP, see img/CREDITS.txt)
   ----------------------------------------------------------------------------
   Photos used by screens (Fellfoot hero fells/cabins, Crow Lane coffee, the
   "Your business" homeware listing, Studio North yoga, Greenslate dishes) are fetched from Unsplash and
   converted to WebP locally, stored in build/img/, credited in img/CREDITS.txt.
   Working pattern (Bash), find IDs via WebSearch "unsplash <subject>":
     curl -sL -o /tmp/x.jpg "https://images.unsplash.com/photo-<ID>?w=1200&q=70" \
       && cwebp -q 72 /tmp/x.jpg -o build/img/<name>.webp
   Size to need: hero ~1200w, thumbs ~600w. If a fetch fails, fall back to a
   brand gradient/solid built from the vars below — never block on an image.
   Reference an image inside a screen with var-driven brand framing, e.g.
     background: var(--mb-surface) url(./img/fellfoot-hero.webp) center/cover;
   ============================================================================ */

/* ---- Brand webfonts (light/modern, distinct from the dark Spectral/JetBrains
   chrome). One @import; families chosen to pair within each brand. Chrome fonts
   are untouched. ---------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=Work+Sans:wght@400;500;600;700&display=swap');

/* ============================================================================
   .mb BASE  —  the light "page" inside a dark device. Resets inherited dark
   chrome styling so a brand reads as its own clean product UI.
   ============================================================================ */
.mb {
  /* sensible neutral defaults; every .mb--brand overrides the palette */
  --mb-bg:        #ffffff;
  --mb-surface:   #ffffff;
  --mb-surface-2: #f4f5f7;
  --mb-line:      #e6e8ec;
  --mb-text:      #1c2024;
  --mb-text-soft: #5b626b;
  --mb-accent:    #2a2f36;
  --mb-accent-2:  #8a9099;
  --mb-on-accent: #ffffff;
  --mb-font-head: 'DM Sans', system-ui, sans-serif;
  --mb-font-body: 'DM Sans', system-ui, sans-serif;
  --mb-font-num:  'Space Grotesk', 'DM Sans', system-ui, sans-serif;
  --mb-radius:    12px;
  --mb-shadow:    0 1px 2px rgba(20,24,28,0.05), 0 8px 24px -12px rgba(20,24,28,0.18);

  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: var(--mb-bg);
  color: var(--mb-text);
  font-family: var(--mb-font-body);
  /* let screens size by frame width like .screen-ui does */
  container-type: inline-size;
  /* crisp light text rendering on the small "screens" */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

/* Hard reset of leaked dark-chrome rules so a brand screen is self-contained.
   The kit's .screen-ui/.figure/.card etc. assume dark tokens; inside .mb we
   neutralise the inherited colour + family and let brand styles take over. */
.mb,
.mb * {
  border-color: var(--mb-line);
}
.mb .figure,
.mb [class*="figure"] {
  font-family: var(--mb-font-num);
  font-variant-numeric: tabular-nums;
  color: inherit;
}
.mb h1, .mb h2, .mb h3, .mb h4 {
  font-family: var(--mb-font-head);
  color: var(--mb-text);
  margin: 0;
  line-height: 1.12;
}
.mb p { color: var(--mb-text-soft); margin: 0; }
.mb small, .mb .mb-muted { color: var(--mb-text-soft); }

/* Reusable light-UI primitives screens MAY use (all var-driven, optional). */
.mb-card {
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  border-radius: var(--mb-radius);
  box-shadow: var(--mb-shadow);
  padding: clamp(8px, 2.4cqw, 16px);
}
.mb-inset {
  background: var(--mb-surface-2);
  border-radius: calc(var(--mb-radius) - 4px);
}
.mb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .4em;
  background: var(--mb-accent); color: var(--mb-on-accent);
  font-family: var(--mb-font-body); font-weight: 600;
  border: 0; border-radius: 999px;
  padding: .55em 1.1em;
  letter-spacing: .01em;
}
.mb-btn--ghost {
  background: transparent; color: var(--mb-accent);
  border: 1px solid var(--mb-accent);
}
.mb-chip {
  display: inline-flex; align-items: center; gap: .35em;
  background: var(--mb-surface-2); color: var(--mb-text-soft);
  font-family: var(--mb-font-body); font-size: .82em; font-weight: 500;
  border-radius: 999px; padding: .28em .7em;
}
.mb-pill {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--mb-font-num); font-size: .72em; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--mb-accent);
}
.mb-pill::before {
  content: ""; width: .5em; height: .5em; border-radius: 50%;
  background: var(--mb-accent-2);
}

/* ----------------------------------------------------------------------------
   TYPEFACE LOGO  —  .mb-logo renders the business name as a type wordmark.
   ---------------------------------------------------------------------------- */
.mb-logo {
  display: inline-flex; align-items: baseline; gap: .14em;
  font-family: var(--mb-font-head);
  color: var(--mb-accent);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  /* default; brands override case/spacing/weight below */
  font-size: clamp(13px, 3.4cqw, 20px);
}
.mb-logo--stack { flex-direction: column; align-items: flex-start; gap: .15em; }
.mb-logo__tag {
  font-family: var(--mb-font-num);
  font-size: .42em; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--mb-text-soft);
}
/* optional tiny brand glyph square before the wordmark */
.mb-logo--mark::before {
  content: ""; flex: 0 0 auto;
  width: .82em; height: .82em; margin-right: .12em;
  border-radius: .18em;
  background: var(--mb-accent);
  align-self: center;
}

/* ============================================================================
   BRAND 1 — "YOUR BUSINESS"   reads as the viewer's own business (clean,
   generic). class name `mb--maker` kept as the palette key (referenced by
   s2.css + s6b.css selectors). clay + ink, clean grotesk. Warm minimal.
   -> s2 merged-system tablet + s6b marketplace feature.
   ============================================================================ */
.mb--maker {
  --mb-bg:        #faf7f2;   /* warm paper */
  --mb-surface:   #ffffff;
  --mb-surface-2: #f1ebe2;   /* soft clay tint */
  --mb-line:      #e7ddd0;
  --mb-text:      #23211e;   /* ink */
  --mb-text-soft: #6b6358;
  --mb-accent:    #b4512f;   /* terracotta / clay */
  --mb-accent-2:  #c98a3e;   /* warm ochre */
  --mb-on-accent: #fdf6ef;
  --mb-font-head: 'Space Grotesk', system-ui, sans-serif;
  --mb-font-body: 'Space Grotesk', system-ui, sans-serif;
  --mb-font-num:  'Space Grotesk', system-ui, sans-serif;
  --mb-radius:    10px;
  --mb-shadow:    0 1px 2px rgba(35,33,30,0.05), 0 10px 28px -14px rgba(35,33,30,0.22);
}
.mb--maker .mb-logo {
  font-weight: 500;
  letter-spacing: -.01em;
  text-transform: none;
}

/* ============================================================================
   BRAND 2 — FELLFOOT STAYS    Lakes holiday lets
   forest + stone, serif + sans. Earthy editorial. -> s3 mock website.
   ============================================================================ */
.mb--fellfoot {
  --mb-bg:        #f6f5f1;   /* stone paper */
  --mb-surface:   #fffefb;
  --mb-surface-2: #eceae3;
  --mb-line:      #ddd9cf;
  --mb-text:      #232a25;   /* deep forest ink */
  --mb-text-soft: #5d655c;
  --mb-accent:    #2f5d45;   /* forest green */
  --mb-accent-2:  #8a7c5f;   /* stone / bracken */
  --mb-on-accent: #f3f6f1;
  --mb-font-head: 'Fraunces', Georgia, serif;     /* editorial serif headings */
  --mb-font-body: 'Work Sans', system-ui, sans-serif; /* clean sans body */
  --mb-font-num:  'Work Sans', system-ui, sans-serif;
  --mb-radius:    8px;
  --mb-shadow:    0 1px 2px rgba(35,42,37,0.05), 0 12px 30px -16px rgba(35,42,37,0.25);
}
.mb--fellfoot .mb-logo {
  font-weight: 600;
  letter-spacing: .005em;
  font-style: normal;
}
.mb--fellfoot .mb-logo--stack .mb-logo__tag { color: var(--mb-accent-2); }

/* ============================================================================
   BRAND 3 — GREENSLATE KITCHEN   modern bistro
   sage + cream, refined. -> s4 ops dashboard AND s5 data screens.
   ============================================================================ */
.mb--greenslate {
  --mb-bg:        #f7f8f4;   /* cream-sage paper */
  --mb-surface:   #ffffff;
  --mb-surface-2: #eef1ea;
  --mb-line:      #dfe4d8;
  --mb-text:      #20271f;   /* slate-green ink */
  --mb-text-soft: #5a6256;
  --mb-accent:    #5b7355;   /* sage */
  --mb-accent-2:  #b08b4f;   /* warm brass for figures/highlights */
  --mb-on-accent: #f5f7f2;
  --mb-font-head: 'Fraunces', Georgia, serif;
  --mb-font-body: 'Manrope', system-ui, sans-serif;
  --mb-font-num:  'Space Grotesk', 'Manrope', system-ui, sans-serif;
  --mb-radius:    12px;
  --mb-shadow:    0 1px 2px rgba(32,39,31,0.05), 0 10px 26px -14px rgba(32,39,31,0.20);
}
.mb--greenslate .mb-logo {
  font-weight: 600;
  letter-spacing: .01em;
}

/* ============================================================================
   BRAND 4 — CROW LANE COFFEE    specialty coffee
   modern, espresso + cream + a confident accent. -> s6 social post-flow.
   ============================================================================ */
.mb--crowlane {
  --mb-bg:        #fbfaf8;
  --mb-surface:   #ffffff;
  --mb-surface-2: #f1ece6;
  --mb-line:      #e3dbd2;
  --mb-text:      #1f1a17;   /* roast-dark ink */
  --mb-text-soft: #6a5f56;
  --mb-accent:    #c2410c;   /* bright modern orange */
  --mb-accent-2:  #3f3a36;   /* espresso */
  --mb-on-accent: #fff7f2;
  --mb-font-head: 'Space Grotesk', system-ui, sans-serif;
  --mb-font-body: 'DM Sans', system-ui, sans-serif;
  --mb-font-num:  'Space Grotesk', system-ui, sans-serif;
  --mb-radius:    14px;
  --mb-shadow:    0 1px 2px rgba(31,26,23,0.05), 0 10px 28px -14px rgba(31,26,23,0.22);
}
.mb--crowlane .mb-logo {
  font-weight: 700;
  letter-spacing: -.02em;
  text-transform: lowercase;
}

/* ============================================================================
   BRAND 5 — STUDIO NORTH    yoga / wellness
   calm modern, dusk-blue + warm sand, airy. -> s6 social post-flow.
   ============================================================================ */
.mb--studionorth {
  --mb-bg:        #f7f6f9;   /* cool off-white */
  --mb-surface:   #ffffff;
  --mb-surface-2: #efeef3;
  --mb-line:      #e4e2eb;
  --mb-text:      #232634;   /* dusk ink */
  --mb-text-soft: #5f6473;
  --mb-accent:    #5a6b8c;   /* calm dusk blue */
  --mb-accent-2:  #c9a98a;   /* warm sand */
  --mb-on-accent: #f6f7fb;
  --mb-font-head: 'Cormorant Garamond', Georgia, serif; /* elegant calm serif */
  --mb-font-body: 'DM Sans', system-ui, sans-serif;
  --mb-font-num:  'DM Sans', system-ui, sans-serif;
  --mb-radius:    16px;
  --mb-shadow:    0 1px 2px rgba(35,38,52,0.05), 0 12px 32px -16px rgba(35,38,52,0.20);
}
.mb--studionorth .mb-logo {
  font-weight: 600;
  letter-spacing: .04em;
  font-size: clamp(14px, 3.6cqw, 22px);
}
.mb--studionorth .mb-logo--stack .mb-logo__tag { letter-spacing: .32em; }

/* ============================================================================
   NEUTRAL PRODUCT BRAND — for s6b feature UIs that want a clean, unbranded
   modern product look rather than one of the five named businesses.
   Indigo-on-white SaaS neutral. Use `.mb mb--neutral`.
   ============================================================================ */
.mb--neutral {
  --mb-bg:        #ffffff;
  --mb-surface:   #ffffff;
  --mb-surface-2: #f4f5f8;
  --mb-line:      #e6e8ee;
  --mb-text:      #1a1d23;
  --mb-text-soft: #5a606b;
  --mb-accent:    #3d5afe;   /* product indigo */
  --mb-accent-2:  #00a37a;   /* success green */
  --mb-on-accent: #ffffff;
  --mb-font-head: 'Manrope', system-ui, sans-serif;
  --mb-font-body: 'Manrope', system-ui, sans-serif;
  --mb-font-num:  'Space Grotesk', system-ui, sans-serif;
  --mb-radius:    12px;
  --mb-shadow:    0 1px 2px rgba(26,29,35,0.05), 0 8px 22px -12px rgba(26,29,35,0.18);
}
.mb--neutral .mb-logo { font-weight: 800; letter-spacing: -.02em; }

/* ============================================================================
   BRAND 6 — FELLSIDE PANTRY    café / deli ops
   warm oat + amber, honey accent. -> s1 hero ops dashboard (the LCP screen).
   Distinct from Greenslate (sage bistro): this is a lighter, warmer pantry.
   ============================================================================ */
.mb--fellside {
  --mb-bg:        #fcfaf5;   /* warm oat paper */
  --mb-surface:   #ffffff;
  --mb-surface-2: #f3eee2;   /* soft oat tint */
  --mb-line:      #e7dfcd;
  --mb-text:      #28231a;   /* roasted-grain ink */
  --mb-text-soft: #6c6354;
  --mb-accent:    #b87333;   /* honey / amber */
  --mb-accent-2:  #4f7a52;   /* fresh-produce green for deltas */
  --mb-on-accent: #fef8f0;
  --mb-font-head: 'Fraunces', Georgia, serif;
  --mb-font-body: 'Manrope', system-ui, sans-serif;
  --mb-font-num:  'Space Grotesk', 'Manrope', system-ui, sans-serif;
  --mb-radius:    12px;
  --mb-shadow:    0 1px 2px rgba(40,35,26,0.05), 0 10px 26px -14px rgba(40,35,26,0.20);
}
.mb--fellside .mb-logo {
  font-weight: 600;
  letter-spacing: .005em;
}

/* ============================================================================
   BRAND 7 — FELLGATE ELECTRICAL    local electrician / trades
   confident navy + safety-amber, clean grotesk. -> s7b local-search result card.
   Reads as a trustworthy local trade business in a Google-style result.
   ============================================================================ */
.mb--fellgate {
  --mb-bg:        #ffffff;
  --mb-surface:   #ffffff;
  --mb-surface-2: #f3f5f8;
  --mb-line:      #e4e7ec;
  --mb-text:      #1a2230;   /* navy ink */
  --mb-text-soft: #5a6473;
  --mb-accent:    #1f5fbf;   /* trustworthy trade blue */
  --mb-accent-2:  #e8a317;   /* safety amber (stars / highlight) */
  --mb-on-accent: #ffffff;
  --mb-font-head: 'Space Grotesk', system-ui, sans-serif;
  --mb-font-body: 'DM Sans', system-ui, sans-serif;
  --mb-font-num:  'Space Grotesk', system-ui, sans-serif;
  --mb-radius:    12px;
  --mb-shadow:    0 1px 2px rgba(26,34,48,0.05), 0 10px 28px -14px rgba(26,34,48,0.22);
}
.mb--fellgate .mb-logo {
  font-weight: 700;
  letter-spacing: -.01em;
}

/* ----------------------------------------------------------------------------
   Reduced motion / a11y: this kit defines no animation. Screens own their
   motion and must keep the transform/opacity-only + prefers-reduced-motion
   contract from CONVENTIONS.md. Brand colours are chosen for AA body contrast
   on their --mb-bg / --mb-surface.
   ---------------------------------------------------------------------------- */