/* ============================================================
   MILLBOARD — Colors & Type
   Based on the Millboard Refreshed Brand Guidelines 2025
   ============================================================ */

/* ---- F37 Ginger webfonts ---- */
@font-face {
  font-family: "F37 Ginger";
  font-weight: 100;
  font-style: normal;
  src: url("./fonts/f37ginger-thin.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "F37 Ginger";
  font-weight: 100;
  font-style: italic;
  src: url("./fonts/f37ginger-thinitalic.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "F37 Ginger";
  font-weight: 300;
  font-style: normal;
  src: url("./fonts/f37ginger-light.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "F37 Ginger";
  font-weight: 300;
  font-style: italic;
  src: url("./fonts/f37ginger-lightitalic.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "F37 Ginger";
  font-weight: 400;
  font-style: normal;
  src: url("./fonts/f37ginger-regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "F37 Ginger";
  font-weight: 400;
  font-style: italic;
  src: url("./fonts/f37ginger-italic.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "F37 Ginger";
  font-weight: 700;
  font-style: normal;
  src: url("./fonts/f37ginger-bold.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "F37 Ginger";
  font-weight: 700;
  font-style: italic;
  src: url("./fonts/f37ginger-bolditalic.ttf") format("truetype");
  font-display: swap;
}

:root {
  /* ---------- BRAND COLORS (from Brand Guide p.21) ---------- */

  /* Primary palette */
  --mb-olive:           #78953C;  /* MB Olive 2306. Accent only — never titles/body */
  --mb-spring-wood:     #F8F4F0;  /* MB Spring Wood 6198. Default page background */
  --mb-mist:            #DEDBD2;  /* MB Mist Warm Grey 2. Web section divider only */
  --mb-charcoal:        #47474C;  /* MB Charcoal 2479. In logo only — never body */
  --mb-charcoal-black:  #2F292E;  /* MB Charcoal Black 440. Reserved for titles + body */

  /* Secondary palette — accent only */
  --mb-apple:               #A0CD4F;  /* MB Apple 2300 */
  --mb-wenge:               #625249;  /* MB Wenge / Warm Grey 11 — textured bg */
  --mb-sustainable-green:   #34401A;  /* MB Sustainable Green 5743 — textured bg */

  /* ---------- SEMANTIC COLOR TOKENS ---------- */
  --bg-page:        var(--mb-spring-wood);
  --bg-section:     var(--mb-mist);
  --bg-dark:        var(--mb-sustainable-green);
  --bg-dark-warm:   var(--mb-wenge);

  --fg-default:     var(--mb-charcoal-black);   /* body + headings */
  --fg-muted:       #6e6a6c;                    /* derived — soft secondary */
  --fg-on-dark:     var(--mb-spring-wood);      /* per BG: text on dark imagery */
  --fg-accent:      var(--mb-olive);            /* "Outside.", accent rules */

  --border-rule:    rgba(47, 41, 46, 0.18);     /* hairlines on light bg */
  --border-rule-dk: rgba(248, 244, 240, 0.22);  /* hairlines on dark bg */

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans:    "F37 Ginger", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-fallback:"Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Font weights — note: brand explicitly forbids 400 (Regular) and 100 (Thin)
     in marketing layouts. Use 300 (Light) for headings/body and 700 (Bold)
     for emphasis. 400/100 kept here for app UI only where needed. */
  --fw-thin:    100;
  --fw-light:   300;
  --fw-regular: 400;
  --fw-bold:    700;

  /* Tracking (letter-spacing) — brand spec */
  --tracking-heading: 0.20em;   /* "Main heading" — F37 Ginger Light, ALL CAPS, 200 */
  --tracking-sub:     0.16em;   /* "Subheading"  — F37 Ginger Bold,  ALL CAPS, 160 */
  --tracking-eyebrow: 0.24em;
  --tracking-body:    0;

  /* Line heights */
  --lh-tight:  1.05;
  --lh-snug:   1.15;
  --lh-base:   1.55;
  --lh-relaxed:1.7;

  /* Font sizes (fluid-friendly) */
  --fs-display:  clamp(56px, 7.5vw, 112px);
  --fs-h1:       clamp(40px, 5vw, 64px);
  --fs-h2:       clamp(28px, 3.4vw, 44px);
  --fs-h3:       22px;
  --fs-sub:      14px;   /* subheadings; ALL CAPS + tracking */
  --fs-eyebrow:  12px;
  --fs-body:     16px;
  --fs-body-lg:  18px;
  --fs-small:    13px;
  --fs-caption:  11px;

  /* ---------- SPACING ---------- */
  --space-0:  0;
  --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: 144px;   /* generous "let it breathe" gutters */

  /* ---------- RADII ---------- */
  /* Brand is geometric and precise — keep radii small. No pillowy rounding. */
  --radius-0:  0;
  --radius-1:  2px;
  --radius-2:  4px;
  --radius-pill: 999px;  /* used very sparingly, in app UI only */

  /* ---------- SHADOWS ---------- */
  /* Quiet, naturalistic. No heavy drop shadows; brand prefers flat composition. */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(47, 41, 46, 0.06);
  --shadow-2: 0 4px 16px rgba(47, 41, 46, 0.08);
  --shadow-3: 0 12px 40px rgba(47, 41, 46, 0.12);

  /* ---------- TRANSITIONS ---------- */
  --ease-quiet: cubic-bezier(0.22, 0.61, 0.36, 1);   /* gentle, no bounce */
  --dur-fast:   160ms;
  --dur-base:   240ms;
  --dur-slow:   480ms;

  /* ---------- LAYOUT ---------- */
  --container-max: 1440px;
  --container-pad: clamp(20px, 4vw, 64px);
  --rule-thickness: 1px;
}

/* ============================================================
   ELEMENT DEFAULTS — match brand typographic structure
   ============================================================ */

html {
  font-family: var(--font-sans);
  color: var(--fg-default);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--fg-default);
  background: var(--bg-page);
  margin: 0;
}

/* Main Heading: F37 Ginger Light, ALL CAPS, tracking 200, 0.2pt stroke */
h1, .mb-h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-heading);
  text-transform: uppercase;
  color: var(--fg-default);
  margin: 0 0 var(--space-5);
  /* The 0.2pt stroke from the brand guide — subtle weight emphasis */
  -webkit-text-stroke: 0.2px currentColor;
}

.mb-display {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-display);
  line-height: 0.98;
  letter-spacing: var(--tracking-heading);
  text-transform: uppercase;
  color: var(--fg-default);
  -webkit-text-stroke: 0.2px currentColor;
}

h2, .mb-h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-heading);
  text-transform: uppercase;
  color: var(--fg-default);
  margin: 0 0 var(--space-5);
  -webkit-text-stroke: 0.2px currentColor;
}

h3, .mb-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-default);
  margin: 0 0 var(--space-4);
}

/* Subheading: F37 Ginger Bold, ALL CAPS, tracking 160 */
.mb-subheading, h4, .mb-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sub);
  line-height: 1.3;
  letter-spacing: var(--tracking-sub);
  text-transform: uppercase;
  color: var(--fg-default);
  margin: 0 0 var(--space-3);
}

.mb-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-default);
}

/* Body Copy: F37 Ginger Light, sentence case */
p, .mb-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-default);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

.mb-body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-light);
}

.mb-body-bold {
  font-weight: var(--fw-bold);
}

.mb-small {
  font-size: var(--fs-small);
  line-height: 1.55;
}

.mb-caption {
  font-size: var(--fs-caption);
  letter-spacing: 0.05em;
  color: var(--fg-muted);
}

/* Highlighted body — bold inline emphasis (per brand example) */
.mb-highlight {
  font-weight: var(--fw-bold);
}

/* "Outside." accent — used in brand expressions */
.mb-outside {
  color: var(--mb-olive);
}

/* Quote — large pulled brand quote, all caps, light */
.mb-quote {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.25;
  letter-spacing: var(--tracking-heading);
  text-transform: uppercase;
  color: var(--fg-default);
  -webkit-text-stroke: 0.2px currentColor;
}

/* Hairline rule — used as section / accent divider */
.mb-rule {
  display: block;
  border: 0;
  height: var(--rule-thickness);
  background: var(--border-rule);
  margin: 0;
}
.mb-rule--accent {
  background: var(--mb-olive);
  height: 2px;
  width: 48px;
}

/* Surfaces */
.mb-surface       { background: var(--bg-page);    color: var(--fg-default); }
.mb-surface--mist { background: var(--bg-section); color: var(--fg-default); }
.mb-surface--dark { background: var(--bg-dark);    color: var(--fg-on-dark); }
.mb-surface--wenge{ background: var(--bg-dark-warm); color: var(--fg-on-dark); }

/* On dark surfaces, headings + body invert */
.mb-surface--dark h1,
.mb-surface--dark h2,
.mb-surface--dark h3,
.mb-surface--dark p,
.mb-surface--dark .mb-body,
.mb-surface--wenge h1,
.mb-surface--wenge h2,
.mb-surface--wenge h3,
.mb-surface--wenge p,
.mb-surface--wenge .mb-body {
  color: var(--fg-on-dark);
}

/* Links */
a {
  color: var(--fg-default);
  text-decoration: none;
  border-bottom: 1px solid var(--border-rule);
  transition: border-color var(--dur-base) var(--ease-quiet),
              color var(--dur-base) var(--ease-quiet);
}
a:hover {
  border-bottom-color: var(--mb-olive);
}

/* Selection */
::selection {
  background: var(--mb-olive);
  color: var(--mb-spring-wood);
}