/* =========================================================================
   MSM Design System - Colors & Type
   Multimedia Sales & Marketing
   ========================================================================= */

/* ---------- Web Fonts ----------
   Montserrat (body / UI)  - only the variable italic file was supplied.
   We pull regular Montserrat from Google Fonts as a substitute (FLAGGED).
   Nova Round (display)    - supplied locally.
*/
/* Google Fonts Montserrat is loaded with a <link> in each page head (faster than @import). */

@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/Montserrat-Italic-VariableFont_wght.woff2") format("woff2"),
       url("./fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype");
}

@font-face {
  font-family: "Nova Round";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/NovaRound-Regular.woff2") format("woff2"),
       url("./fonts/NovaRound-Regular.ttf") format("truetype");
}

:root {
  /* =========================================================
     COLOR - Brand primaries
     ========================================================= */
  --msm-dark-teal:   #003333;  /* Primary dark - anchor color */
  --msm-blue-green:  #2D5663;  /* Mid teal - supporting */
  --msm-muted-blue:  #548C9D;  /* Lighter teal-blue */

  /* Brand accents */
  --msm-orange:      #F79838;  /* Single warm accent - used sparingly */
  --msm-gray:        #989898;  /* Neutral mid-gray */

  /* =========================================================
     COLOR - Extended neutrals (derived; for UI surfaces only)
     ========================================================= */
  --msm-ink:         #0E1E1E;  /* Body text on light */
  --msm-ink-2:       #2A3A3A;  /* Secondary text on light */
  --msm-ink-3:       #5C6A6A;  /* Tertiary / meta text */
  --msm-line:        #D9DEDE;  /* Hairline borders */
  --msm-line-soft:   #ECEFEF;  /* Soft dividers / row stripes */
  --msm-bg:          #FFFFFF;  /* Default surface */
  --msm-bg-alt:      #F5F7F7;  /* Subtle off-white */
  --msm-bg-cream:    #FAF7F2;  /* Warm neutral pairing for orange */
  --bg-cream:        var(--msm-bg-cream); /* alias */

  /* Inverted / on-dark */
  --msm-on-dark-1:   #FFFFFF;
  --msm-on-dark-2:   #C7D3D3;
  --msm-on-dark-3:   #8DA0A0;

  /* =========================================================
     SEMANTIC tokens
     ========================================================= */
  --fg-1: var(--msm-ink);
  --fg-2: var(--msm-ink-2);
  --fg-3: var(--msm-ink-3);
  --fg-on-dark: var(--msm-on-dark-1);

  --bg-1: var(--msm-bg);
  --bg-2: var(--msm-bg-alt);
  --bg-dark: var(--msm-dark-teal);
  --bg-mid:  var(--msm-blue-green);

  --accent: var(--msm-orange);
  --accent-fg: #FFFFFF;

  --border: var(--msm-line);
  --border-soft: var(--msm-line-soft);

  /* Status (derived to harmonize with brand palette) */
  --status-success: #2E8F6F;
  --status-warn:    #F7B538;
  --status-danger:  #C9462C;
  --status-info:    var(--msm-muted-blue);

  /* =========================================================
     TYPE - Families
     ========================================================= */
  --font-display: "Nova Round", "Montserrat", system-ui, sans-serif;
  --font-sans:    "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* TYPE - Sizing scale (modular, ~1.25) */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  84px;

  /* Line heights */
  --lh-tight:   1.05;  /* @kind font */
  --lh-snug:    1.2;   /* @kind font */
  --lh-normal:  1.5;   /* @kind font */
  --lh-relaxed: 1.65;  /* @kind font */

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-caps:   0.14em; /* Eyebrow / overline labels */

  /* Weight */
  --fw-regular:  400;  /* @kind font */
  --fw-medium:   500;  /* @kind font */
  --fw-semibold: 600;  /* @kind font */
  --fw-bold:     700;  /* @kind font */

  /* =========================================================
     SPACING / RADII / 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;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(0, 51, 51, 0.06), 0 1px 1px rgba(0, 51, 51, 0.04);
  --shadow-2: 0 4px 12px rgba(0, 51, 51, 0.08), 0 1px 2px rgba(0, 51, 51, 0.05);
  --shadow-3: 0 14px 40px rgba(0, 51, 51, 0.14), 0 2px 6px rgba(0, 51, 51, 0.06);
  --shadow-focus: 0 0 0 3px rgba(84, 140, 157, 0.35);

  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);  /* @kind other */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);  /* @kind other */
  --dur-fast:    140ms;  /* @kind other */
  --dur-base:    220ms;  /* @kind other */
  --dur-slow:    380ms;  /* @kind other */
}

/* =========================================================
   ELEMENT-LEVEL DEFAULTS
   ========================================================= */
html { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg-1); }
body { font-size: var(--fs-base); line-height: var(--lh-normal); }

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--msm-dark-teal);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  color: var(--msm-dark-teal);
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--msm-dark-teal);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--msm-blue-green);
}
h5, .h5 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

p, .body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

.lede {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--msm-orange);
}

.caption {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
  color: var(--fg-3);
}

code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-2);
  padding: 0.12em 0.4em;
  border-radius: var(--radius-sm);
  color: var(--msm-blue-green);
}

a {
  color: var(--msm-blue-green);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--msm-dark-teal); }