/* =============================================================================
   MBP DESIGN SYSTEM — Colors & Type
   Source of truth for every interface, slide, and asset.
   ============================================================================= */

/* -- Fonts -------------------------------------------------------------------
   Brand font is SINKIN SANS (Light 300 / Medium 500 / Bold 700). The original
   font files were referenced in the brand book but not provided to this
   project. Until they are added under /fonts, we substitute MANROPE from
   Google Fonts — a geometric humanist sans with similar proportions,
   single-storey 'a', and clean rounded terminals.

   To swap in the real Sinkin Sans:
     1. Drop the .otf/.woff2 files under /fonts/SinkinSans/
     2. Uncomment the @font-face block below and remove the Manrope @import.
   -------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap');

/*
@font-face {
  font-family: 'Sinkin Sans';
  src: url('/fonts/SinkinSans/SinkinSans-300Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sinkin Sans';
  src: url('/fonts/SinkinSans/SinkinSans-500Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sinkin Sans';
  src: url('/fonts/SinkinSans/SinkinSans-700Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
*/

:root {
  /* -- Color tokens ---------------------------------------------------------
     Derived directly from the MBP Brandbook CMYK palette and the actual logo
     PNG. Hex values were sampled from the artwork, not estimated. */

  /* Brand */
  --mbp-navy:           #163b58;  /* C96 M76 Y41 K33 — primary brand color (logo bg, header, hero) */
  --mbp-navy-deep:      #0e2a40;  /* darker tint for sections / footer / overlay */
  --mbp-navy-soft:      #2a557a;  /* hover / accent steps */
  --mbp-orange:         #d17929;  /* C16 M61 Y100 K2 — single accent (the dot, CTAs, ticks) */
  --mbp-orange-deep:    #b16524;  /* hover state for orange */
  --mbp-orange-soft:    #e9a468;  /* lightened for subtle moments only */
  --mbp-sky:            #6cc5e9;  /* C56 M6  Y3  K0  — supporting cool accent, used sparingly */
  --mbp-ink:            #0a0a0a;  /* C75 M68 Y67 K90 — near-black for body text on white */

  /* Neutrals — warm grey scale anchored to the brandbook's C45 M37 Y38 K2 */
  --mbp-stone-900:      #1f1d1b;
  --mbp-stone-700:      #423e3a;
  --mbp-stone-500:      #8e8881;  /* brandbook warm grey */
  --mbp-stone-300:      #c8c2bb;
  --mbp-stone-200:      #e2ddd6;
  --mbp-stone-100:      #efece7;
  --mbp-stone-50:       #f7f5f2;  /* page bg alt — drywall-paper warmth */
  --mbp-white:          #ffffff;

  /* Semantic surfaces */
  --bg:                 var(--mbp-white);
  --bg-alt:             var(--mbp-stone-50);
  --bg-inverse:         var(--mbp-navy);
  --bg-inverse-deep:    var(--mbp-navy-deep);

  /* Semantic foreground */
  --fg:                 var(--mbp-ink);          /* body */
  --fg-muted:           var(--mbp-stone-500);    /* secondary text */
  --fg-subtle:          var(--mbp-stone-300);    /* meta, captions, dividers */
  --fg-inverse:         var(--mbp-white);        /* text on navy */
  --fg-inverse-muted:   rgba(255,255,255,0.72);
  --fg-inverse-subtle:  rgba(255,255,255,0.50);

  /* Action / brand surfaces */
  --accent:             var(--mbp-orange);
  --accent-hover:       var(--mbp-orange-deep);
  --accent-fg:          var(--mbp-white);
  --link:               var(--mbp-navy);
  --link-hover:         var(--mbp-orange);

  /* Borders */
  --border:             var(--mbp-stone-200);
  --border-strong:      var(--mbp-stone-300);
  --border-inverse:     rgba(255,255,255,0.16);

  /* -- Type ---------------------------------------------------------------- */
  --font-sans:          'Sinkin Sans', 'Manrope', -apple-system, BlinkMacSystemFont,
                        'Segoe UI', system-ui, sans-serif;
  --font-display:       var(--font-sans);
  --font-mono:          'JetBrains Mono', 'SFMono-Regular', ui-monospace, monospace;

  /* Weights — match the three brandbook weights */
  --weight-light:       300;
  --weight-regular:     400;  /* synthesized; brand only sanctions 300/500/700 */
  --weight-medium:      500;
  --weight-bold:        700;

  /* Type scale — fluid-ish, modular, generous tracking for navy display */
  --size-eyebrow:       0.75rem;   /* 12 — uppercase label */
  --size-caption:       0.8125rem; /* 13 */
  --size-body-sm:       0.9375rem; /* 15 */
  --size-body:          1.0625rem; /* 17 */
  --size-body-lg:       1.1875rem; /* 19 */
  --size-h6:            1.125rem;  /* 18 */
  --size-h5:            1.375rem;  /* 22 */
  --size-h4:            1.75rem;   /* 28 */
  --size-h3:            2.25rem;   /* 36 */
  --size-h2:            3rem;      /* 48 */
  --size-h1:            4rem;      /* 64 */
  --size-display:       6rem;      /* 96 — hero only */

  --leading-tight:      1.05;
  --leading-snug:       1.2;
  --leading-normal:     1.5;
  --leading-relaxed:    1.65;

  --tracking-tight:     -0.02em;   /* display */
  --tracking-normal:    -0.005em;
  --tracking-wide:      0.08em;    /* eyebrows / small caps */
  --tracking-widest:    0.18em;    /* nav, footer caps */

  /* -- Spacing — 4px base, restrained scale ------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* -- Radius — small and architectural, never pillowy -------------------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* -- Shadows — restrained, mostly hairline borders carry weight --------- */
  --shadow-xs: 0 1px 2px rgba(22, 59, 88, 0.06);
  --shadow-sm: 0 2px 8px rgba(22, 59, 88, 0.08);
  --shadow-md: 0 8px 24px rgba(22, 59, 88, 0.10);
  --shadow-lg: 0 20px 48px rgba(22, 59, 88, 0.14);

  /* Photo over-print — used for hero/banner */
  --scrim-bottom: linear-gradient(to top, rgba(14,42,64,0.85) 0%, rgba(14,42,64,0.0) 60%);
  --scrim-full:   linear-gradient(180deg, rgba(14,42,64,0.55), rgba(14,42,64,0.55));

  /* Motion */
  --ease-out:     cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.45, 0, 0.25, 1);
  --dur-fast:     140ms;
  --dur-base:     220ms;
  --dur-slow:     420ms;
}

/* -- Reset / base type ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--weight-light);  /* light is the brand voice */
  font-size: var(--size-body);
  line-height: var(--leading-relaxed);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* -- Semantic display type --------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--mbp-navy);
  margin: 0 0 var(--space-4);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  font-weight: var(--weight-light);   /* brand favors Light for display */
  text-wrap: balance;
}
h1 { font-size: var(--size-h1); }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); line-height: var(--leading-snug); }
h4 { font-size: var(--size-h4); font-weight: var(--weight-medium); line-height: var(--leading-snug); letter-spacing: var(--tracking-normal); }
h5 { font-size: var(--size-h5); font-weight: var(--weight-medium); letter-spacing: var(--tracking-normal); }
h6 { font-size: var(--size-h6); font-weight: var(--weight-medium); letter-spacing: var(--tracking-normal); }

p {
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

strong, b { font-weight: var(--weight-medium); color: var(--mbp-navy); }

a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); }

small, .caption {
  font-size: var(--size-caption);
  color: var(--fg-muted);
}

/* Utility classes used throughout the kit */
.mbp-eyebrow {
  font-size: var(--size-eyebrow);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--mbp-orange);
  display: inline-block;
}
.mbp-eyebrow--muted { color: var(--fg-muted); }
.mbp-eyebrow--inverse { color: var(--mbp-orange-soft); }

.mbp-display {
  font-size: var(--size-display);
  font-weight: var(--weight-light);
  line-height: 0.95;
  letter-spacing: var(--tracking-tight);
  color: var(--mbp-navy);
}

.mbp-emphasis {                         /* italic + medium — used in tagline */
  font-style: italic;
  font-weight: var(--weight-medium);
}

.mbp-rule {                             /* short orange rule under eyebrows */
  display: inline-block;
  width: 32px;
  height: 2px;
  background: var(--mbp-orange);
  vertical-align: middle;
  margin-right: var(--space-3);
}

/* Selection uses the brand orange */
::selection { background: var(--mbp-orange); color: var(--mbp-white); }