/* ===================================================================
   MegaFix brand foundation — from the official rebrand design system.
   Real brand fonts (Monument Extended + Aktiv Grotesk) and the full
   colour/spacing/type/shadow/motion token set. Linked before style.css.
   =================================================================== */

/* ---- Webfonts (self-hosted OTF, brand-supplied) ---- */
@font-face { font-family: "Monument Extended"; src: url("fonts/MonumentExtended-Light.otf") format("opentype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Monument Extended"; src: url("fonts/MonumentExtended-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Monument Extended"; src: url("fonts/MonumentExtended-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Monument Extended"; src: url("fonts/MonumentExtended-Ultrabold.otf") format("opentype"); font-weight: 800; font-display: swap; }

@font-face { font-family: "Aktiv Grotesk"; src: url("fonts/AktivGrotesk-Light.otf") format("opentype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Aktiv Grotesk"; src: url("fonts/AktivGrotesk-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Aktiv Grotesk"; src: url("fonts/AktivGrotesk-Medium.otf") format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Aktiv Grotesk"; src: url("fonts/AktivGrotesk-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Aktiv Grotesk"; src: url("fonts/AktivGrotesk-Black.otf") format("opentype"); font-weight: 900; font-display: swap; }

:root {
  /* ---- Brand core ---- */
  --mf-navy: #20335d;
  --mf-orange: #ff4d2d;
  --mf-gray: #898a8d;

  /* ---- Navy ramp ---- */
  --mf-navy-900: #131f39;
  --mf-navy-800: #1a2a4b;
  --mf-navy-700: #20335d;
  --mf-navy-600: #2c437a;
  --mf-navy-500: #3a568f;
  --mf-navy-300: #8090b0;
  --mf-navy-100: #d6dce8;
  --mf-navy-50:  #eef1f7;

  /* ---- Orange ramp ---- */
  --mf-orange-700: #d63914;
  --mf-orange-600: #f0421f;
  --mf-orange-500: #ff4d2d;
  --mf-orange-400: #ff6f54;
  --mf-orange-200: #ffb3a4;
  --mf-orange-100: #ffe0d9;
  --mf-orange-50:  #fff2ef;

  /* ---- Steel / neutral ramp ---- */
  --mf-ink: #171a1f;
  --mf-steel-700: #4a4d52;
  --mf-steel-600: #6c6f74;
  --mf-steel-500: #898a8d;
  --mf-steel-400: #a7a9ac;
  --mf-steel-300: #c8c9cc;
  --mf-steel-200: #e3e4e6;
  --mf-steel-100: #eef0f2;
  --mf-steel-50:  #f6f7f8;
  --mf-white: #ffffff;

  /* ---- Semantic status ---- */
  --mf-success: #1f9d55; --mf-success-bg: #e5f5ec;
  --mf-warning: #e8a400; --mf-warning-bg: #fdf3d9;
  --mf-danger:  #d63914; --mf-danger-bg:  #ffe0d9;
  --mf-info:    #2c437a; --mf-info-bg:    #eef1f7;

  /* ---- Semantic aliases ---- */
  --mf-bg: #ffffff;
  --mf-bg-subtle: #f6f7f8;
  --mf-bg-navy: #20335d;
  --mf-bg-navy-deep: #131f39;
  --mf-surface-card: #ffffff;
  --mf-surface-sunken: #f6f7f8;
  --mf-text-strong: #131f39;
  --mf-text-body: #2b3140;
  --mf-text-muted: #6c6f74;
  --mf-text-faint: #898a8d;
  --mf-text-on-navy: #ffffff;
  --mf-text-on-orange: #ffffff;
  --mf-action: #ff4d2d;
  --mf-action-hover: #f0421f;
  --mf-action-active: #d63914;
  --mf-border: #e3e4e6;
  --mf-border-strong: #c8c9cc;
  --mf-border-navy: #20335d;
  --mf-focus-ring: #ff4d2d;

  /* ---- Typography ---- */
  --mf-font-display: "Monument Extended", "Arial Black", system-ui, sans-serif;
  --mf-font-sans: "Aktiv Grotesk", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --mf-font-mono: "Consolas", ui-monospace, "SF Mono", Menlo, monospace;
  --mf-leading-tight: 1.05;
  --mf-leading-snug: 1.2;
  --mf-leading-normal: 1.5;
  --mf-tracking-tight: -0.02em;
  --mf-tracking-normal: 0;
  --mf-tracking-wide: 0.04em;
  --mf-tracking-widest: 0.14em;

  /* ---- Spacing (4px grid) ---- */
  --mf-space-1: 4px;  --mf-space-2: 8px;  --mf-space-3: 12px; --mf-space-4: 16px;
  --mf-space-5: 24px; --mf-space-6: 32px; --mf-space-7: 48px; --mf-space-8: 64px;

  /* ---- Radii (industrial = square-ish) ---- */
  --mf-radius-sm: 2px;
  --mf-radius-md: 4px;
  --mf-radius-lg: 6px;
  --mf-radius-xl: 10px;
  --mf-radius-pill: 999px;

  /* ---- Shadows (navy-tinted, low-spread) ---- */
  --mf-shadow-sm: 0 1px 2px rgba(19,31,57,0.08);
  --mf-shadow-md: 0 4px 12px rgba(19,31,57,0.10);
  --mf-shadow-lg: 0 12px 32px rgba(19,31,57,0.20);
  --mf-shadow-focus: 0 0 0 3px rgba(255,77,45,0.35);

  /* ---- Motion (snappy, mechanical) ---- */
  --mf-duration: 200ms;
  --mf-duration-fast: 120ms;
  --mf-ease: cubic-bezier(0.2, 0, 0.15, 1);

  /* ---- Layout ---- */
  --mf-container: 1200px;
  --mf-header-h: 72px;
}