/* ==========================================================================
   MS Companies Design System — Colors & Type
   Source: uploads/ms_brand_colors_fonts_full.pdf + mscompanies.com
   ========================================================================== */

/* DM Sans — local brand font files (variable weight 100–900 + italic).
   The 18pt / 24pt / 36pt subfamilies are optical sizes; default subfamily
   used here for broad compatibility. */

:root {
  /* ------------------------------------------------------------------
     COLORS
     ------------------------------------------------------------------ */

  /* Primary palette — brand foundation */
  --color-royal-blue:   #0B5FA8;  /* Core brand — headers, buttons, key highlights */
  --color-bright-blue:  #3498DB;  /* Support — accents, charts, lighter emphasis  */
  --color-deep-navy:    #0C477A;  /* Anchor — title bands, strong contrast         */
  --color-white:        #FFFFFF;

  /* Secondary palette — support & flex */
  --color-soft-white:   #FAFAFA;
  --color-accent-cyan:  #1DD4FF;  /* Selective emphasis only                      */
  --color-mist-blue:    #C6D3E4;  /* Fills, dividers, low-contrast support        */
  --color-secondary-blue: #4285F4;/* Links, secondary buttons, data viz           */
  --color-charcoal:     #272A33;  /* Body text, dark contrast                     */

  /* Derived / semantic alpha tints (used for overlays, glows) */
  --color-royal-blue-12:  rgba(11, 95, 168, 0.12);
  --color-royal-blue-24:  rgba(11, 95, 168, 0.24);
  --color-deep-navy-55:   rgba(12, 71, 122, 0.55);
  --color-deep-navy-08:   rgba(12, 71, 122, 0.08);
  --color-deep-navy-06:   rgba(12, 71, 122, 0.06);
  --color-deep-navy-10:   rgba(12, 71, 122, 0.10);
  --color-deep-navy-15:   rgba(12, 71, 122, 0.15);

  /* ------------------------------------------------------------------
     SEMANTIC COLOR VARS
     ------------------------------------------------------------------ */

  /* Foreground */
  --fg-1: var(--color-charcoal);         /* primary text                       */
  --fg-2: #52606D;                        /* secondary text                     */
  --fg-3: #8C96A3;                        /* muted text, captions               */
  --fg-accent: var(--color-royal-blue);   /* link, accent text                  */
  --fg-on-brand: var(--color-white);      /* text on royal/navy backgrounds     */

  /* Background */
  --bg-1: var(--color-white);             /* base                               */
  --bg-2: var(--color-soft-white);        /* alt section                        */
  --bg-3: #F0F4F9;                        /* hover / selected (derived)         */
  --bg-brand: var(--color-royal-blue);
  --bg-brand-dark: var(--color-deep-navy);

  /* Borders */
  --border-1: var(--color-mist-blue);     /* default divider / card border      */
  --border-2: #E3EAF3;                    /* softer divider (derived)           */
  --border-focus: var(--color-royal-blue);

  /* States */
  --state-hover:    rgba(11, 95, 168, 0.06);
  --state-active:   rgba(11, 95, 168, 0.12);
  --state-selected: rgba(11, 95, 168, 0.08);

  /* Semantic status (derived — not in official palette, built to harmonize) */
  --status-success: #1E9E6A;
  --status-warning: #D89E00;
  --status-danger:  #D64545;
  --status-info:    var(--color-bright-blue);

  /* ------------------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------------------ */

  --font-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', monospace;

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  /* Type scale (display → micro) */
  --fs-display:  72px;   /* hero headlines, stat numbers                         */
  --fs-h1:       56px;
  --fs-h2:       40px;
  --fs-h3:       32px;
  --fs-h4:       24px;
  --fs-h5:       20px;
  --fs-lead:     20px;   /* intro / lead paragraph                               */
  --fs-body:     16px;   /* default body                                         */
  --fs-small:    14px;
  --fs-label:    12px;   /* uppercase labels                                     */

  /* Line heights — manufacturing-operational readability */
  --lh-tight:    1.05;   /* display                                              */
  --lh-snug:     1.15;   /* headings                                             */
  --lh-normal:   1.5;    /* body                                                 */
  --lh-relaxed:  1.65;   /* long-form                                            */

  /* Letter spacing */
  --ls-display:  -0.025em;
  --ls-heading:  -0.015em;
  --ls-body:     0em;
  --ls-label:    0.08em;

  /* ------------------------------------------------------------------
     SPACING (8pt base)
     ------------------------------------------------------------------ */
  --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: 128px;

  /* ------------------------------------------------------------------
     RADII
     ------------------------------------------------------------------ */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-pill: 9999px;

  /* ------------------------------------------------------------------
     SHADOWS (all blue-tinted, never pure black)
     ------------------------------------------------------------------ */
  --shadow-xs:   0 1px 2px var(--color-deep-navy-06);
  --shadow-sm:   0 1px 2px var(--color-deep-navy-06), 0 1px 3px var(--color-deep-navy-08);
  --shadow-md:   0 4px 6px rgba(12, 71, 122, 0.05), 0 10px 20px var(--color-deep-navy-10);
  --shadow-lg:   0 20px 40px var(--color-deep-navy-15);
  --shadow-focus: 0 0 0 3px rgba(52, 152, 219, 0.30);

  /* ------------------------------------------------------------------
     TRANSITIONS
     ------------------------------------------------------------------ */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:      150ms;
  --dur-base:      250ms;
  --dur-slow:      400ms;

  /* ------------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------------ */
  --container-max: 1280px;
  --header-height: 72px;
  --sidebar-width: 240px;
}

/* ==========================================================================
   SEMANTIC TYPOGRAPHY CLASSES
   Apply these directly to elements for brand-correct text.
   ========================================================================== */

body, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-body);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display, h1.display {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
}

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  color: var(--fg-1);
}

h2, .h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  color: var(--fg-1);
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  color: var(--fg-1);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

h5, .h5 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

p, .p {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}

.small, small {
  font-size: var(--fs-small);
  color: var(--fg-2);
}

.eyebrow, .label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-accent);
}

.mono, code {
  font-family: var(--font-mono);
  font-size: 0.925em;
  background: var(--bg-3);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}

a {
  color: var(--fg-accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--color-deep-navy); text-decoration: underline; text-underline-offset: 3px; }

/* Stat number (used in the "Supporting our Manufacturing Partners" bands) */
.stat-number {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--color-royal-blue);
}
.stat-label {
  font-size: var(--fs-small);
  color: var(--fg-2);
  margin-top: var(--space-2);
}