/* wp-content/themes/mosaic/assets/css/design-system.css */
/* ============================================================================
   MOSAIC — Design Foundations
   Colors + Type tokens for the Mosaic brand (bar & beverage consultancy).
   Grounded in sustainability + community: earthy sage green, warm paper
   neutrals, harvest clay accent, and a calibrated data-status scale.
   ----------------------------------------------------------------------------
   Canonical token source. Transcribed verbatim from the design handoff
   colors_and_type.css (MOS-108). Only change from source: @font-face src
   paths adjusted from 'fonts/…' to '../fonts/…' so they resolve from
   /assets/css/ to the self-hosted woff2 in /assets/fonts/.
   ----------------------------------------------------------------------------
   Load this file, then use the semantic vars (--h1, --body, --fg, --bg…).
   British English throughout the brand (revitalised, programme, colour-in-copy).
   ============================================================================ */

/* ----------------------------------------------------------------------------
   FONTS  (self-hosted woff2 in /assets/fonts)
   - Bricolage Grotesque  → display / headlines (crafted, modern, a touch
     unexpected — "transcend the ordinary")
   - Hanken Grotesk       → body + UI (neutral, legible workhorse)
   - Space Mono           → eyebrows, labels, data, the "section ---" motif
   Bricolage + Hanken ship as VARIABLE woff2 (one file serves all weights).
---------------------------------------------------------------------------- */
@font-face{font-family:'Bricolage Grotesque';src:url('../fonts/BricolageGrotesque-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Bricolage Grotesque';src:url('../fonts/BricolageGrotesque-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Bricolage Grotesque';src:url('../fonts/BricolageGrotesque-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Bricolage Grotesque';src:url('../fonts/BricolageGrotesque-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:'Hanken Grotesk';src:url('../fonts/HankenGrotesk-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Hanken Grotesk';src:url('../fonts/HankenGrotesk-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Hanken Grotesk';src:url('../fonts/HankenGrotesk-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Hanken Grotesk';src:url('../fonts/HankenGrotesk-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Space Mono';src:url('../fonts/SpaceMono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Space Mono';src:url('../fonts/SpaceMono-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}

:root{
  /* === BRAND COLOR — Sage =================================================
     The single equity colour from mosaicbars.com (#5D8473). A muted,
     botanical green: grounded, calm, natural. Built into a full scale. */
  --sage-50:#EEF3F0;
  --sage-100:#DCE7E1;
  --sage-200:#BCD0C5;
  --sage-300:#9BB8A8;
  --sage-400:#7C9E8B;
  --sage-500:#5D8473;   /* ← brand primary */
  --sage-600:#4C6E5F;
  --sage-700:#3C574B;
  --sage-800:#2F3D36;   /* deep forest — primary dark surface */
  --sage-900:#222E28;

  /* === WARM NEUTRALS — Paper & Ink =======================================
     Greys carry a faint warm/green cast so they sit beside the sage without
     going clinical-cold. "Paper" backgrounds evoke craft + natural materials. */
  --paper:#F7F4EC;       /* default page background (warm off-white) */
  --paper-2:#FBF9F3;     /* raised paper */
  --surface:#FFFFFF;     /* cards on paper */
  --ink-900:#1F231E;     /* near-black headline ink (warm) */
  --ink-700:#3A403A;     /* body on light */
  --ink-500:#6B716A;     /* secondary text */
  --ink-400:#969B93;     /* tertiary / captions */
  --ink-300:#C3C7BF;     /* disabled / placeholder */
  --line:#E6E1D5;        /* hairline divider on paper */
  --line-strong:#D6D0C1; /* stronger divider / input border */

  /* === ACCENT — Clay ======================================================
     A soft, dusty terracotta for sparing warmth (highlights, editorial
     accents). Muted like a natural dye — never loud. Sage always leads. */
  --clay-100:#EFE3D9;
  --clay-300:#D3B0A0;
  --clay-500:#B98268;
  --clay-600:#9E6C54;

  /* === STATUS / DATA SCALE ===============================================
     A calm, naturalistic traffic scale (earth pigments, not signal colours)
     used across badges and charts. Green = good, ochre = monitor,
     rust = action needed. Kept muted to sit beside the sage. */
  --status-good:#7A9E84;
  --status-good-soft:#E8EFE9;
  --status-warn:#C8A56B;
  --status-warn-soft:#F1EADA;
  --status-alert:#BC6F5C;
  --status-alert-soft:#F2E3DD;
  --status-info:var(--sage-500);

  /* === SEMANTIC (LIGHT / BRAND SURFACES) ================================= */
  --bg:var(--paper);
  --bg-raised:var(--surface);
  --fg:var(--ink-900);
  --fg-muted:var(--ink-500);
  --fg-subtle:var(--ink-400);
  --primary:var(--sage-500);
  --primary-strong:var(--sage-600);
  --primary-ink:#FFFFFF;          /* text on primary */
  --on-dark:#F4F1E8;              /* text on forest */
  --on-dark-muted:#A9B6AD;
  --border:var(--line);
  --border-strong:var(--line-strong);
  --focus-ring:rgba(93,132,115,.45);
  --selection:rgba(93,132,115,.22);

  /* ----------------------------------------------------------------------
     TYPE — families
  ---------------------------------------------------------------------- */
  --font-display:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;
  --font-body:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'Space Mono','SF Mono',ui-monospace,Menlo,monospace;
  --font-system:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; /* generic system fallback */

  /* TYPE — fluid display scale (clamped for responsive marketing) */
  --fs-display:clamp(3rem,7vw,6rem);   /* hero statements */
  --fs-h1:clamp(2.4rem,4.6vw,3.75rem);
  --fs-h2:clamp(1.8rem,3vw,2.6rem);
  --fs-h3:clamp(1.35rem,2vw,1.75rem);
  --fs-h4:1.25rem;
  --fs-lead:clamp(1.1rem,1.5vw,1.375rem); /* intro paragraphs */
  --fs-body:1.0625rem;   /* 17px */
  --fs-small:0.9375rem;  /* 15px */
  --fs-eyebrow:0.8125rem;/* 13px mono label */
  --fs-caption:0.75rem;

  /* TYPE — weights / leading / tracking */
  --fw-reg:400; --fw-med:500; --fw-semi:600; --fw-bold:700; --fw-black:800;
  --lh-tight:1.04;
  --lh-snug:1.18;
  --lh-body:1.62;
  --tracking-display:-0.02em;
  --tracking-tight:-0.01em;
  --tracking-eyebrow:0.18em; /* generous letterspacing on mono eyebrows */

  /* ----------------------------------------------------------------------
     SPACE / RADIUS / SHADOW / MOTION
  ---------------------------------------------------------------------- */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --space-9:96px; --space-10:128px;

  --r-xs:4px;   /* mosaic-tile radius (matches logo tiles) */
  --r-sm:8px;
  --r-md:12px;
  --r-lg:18px;  /* default card */
  --r-xl:28px;
  --r-2xl:36px;
  --r-pill:999px;

  /* Soft, warm, low-contrast elevation — natural not glossy */
  --shadow-xs:0 1px 2px rgba(31,35,30,.06);
  --shadow-sm:0 2px 8px rgba(31,35,30,.07);
  --shadow-md:0 10px 28px -8px rgba(31,35,30,.16);
  --shadow-lg:0 28px 60px -18px rgba(31,35,30,.26);

  --ease:cubic-bezier(.22,.61,.36,1);     /* standard ease-out (calm) */
  --ease-emph:cubic-bezier(.65,0,.35,1);  /* emphasised */
  --dur-fast:140ms; --dur:240ms; --dur-slow:420ms;
}

/* ============================================================================
   SEMANTIC ELEMENT DEFAULTS  (opt-in: scope under .mosaic-type or apply vars)
   ============================================================================ */
.mosaic-type{font-family:var(--font-body);color:var(--fg);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
.mosaic-type ::selection{background:var(--selection);}

.display{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-display);line-height:var(--lh-tight);letter-spacing:var(--tracking-display);text-wrap:balance;}
h1,.h1{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:var(--tracking-display);text-wrap:balance;}
h2,.h2{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-h2);line-height:var(--lh-snug);letter-spacing:var(--tracking-tight);text-wrap:balance;}
h3,.h3{font-family:var(--font-display);font-weight:var(--fw-semi);font-size:var(--fs-h3);line-height:var(--lh-snug);letter-spacing:var(--tracking-tight);}
h4,.h4{font-family:var(--font-body);font-weight:var(--fw-semi);font-size:var(--fs-h4);line-height:1.3;}
.lead{font-family:var(--font-body);font-weight:var(--fw-reg);font-size:var(--fs-lead);line-height:1.5;color:var(--fg-muted);text-wrap:pretty;}
p,.body{font-size:var(--fs-body);line-height:var(--lh-body);text-wrap:pretty;}
small,.small{font-size:var(--fs-small);line-height:1.5;}

/* Eyebrow / kicker — mono, uppercase, letterspaced. Pairs with the brand's
   "Section name ---" device (use .eyebrow + a trailing rule). */
.eyebrow{font-family:var(--font-mono);font-weight:400;font-size:var(--fs-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--primary-strong);}
.eyebrow--dash::after{content:" ———";color:var(--border-strong);}

code,.mono{font-family:var(--font-mono);font-size:.92em;}