/* ========================================================================
   MTU Design System v1.1 — CSS Tokens (Web)
   Mirror of theme/ tokens used in the React Native apps (mtu-v11, mtu-staff).
   Single source of brand truth for the website.

   Usage:
     <link rel="stylesheet" href="/css/mtu-design-system.css">

   Then use vars anywhere:
     background: var(--mtu-brand-red);
     padding: var(--space-lg);
     font-size: var(--font-h1-size);
   ========================================================================= */

:root {
  /* ============ BRAND ============ */
  --mtu-brand-red: #D20E36;
  --mtu-brand-red-light: #E8344E;
  --mtu-brand-red-deep: #A00B28;
  --mtu-brand-red-darkest: #5C1024;

  --mtu-brand-navy: #1B2A6B;
  --mtu-brand-navy-light: #2A3F8F;
  --mtu-brand-navy-deep: #0F1A4A;

  /* ============ BACKGROUNDS ============ */
  --mtu-bg-primary: #0F0F2A;
  --mtu-bg-secondary: #08081A;
  --mtu-bg-elevated: #1A1A35;
  --mtu-bg-overlay: rgba(15, 15, 42, 0.85);

  /* ============ TEXT ============ */
  --mtu-text-primary: #FFFFFF;
  --mtu-text-secondary: rgba(255, 255, 255, 0.85);
  --mtu-text-tertiary: rgba(255, 255, 255, 0.65);
  --mtu-text-muted: rgba(255, 255, 255, 0.45);
  --mtu-text-disabled: rgba(255, 255, 255, 0.30);
  --mtu-text-on-brand: #FFFFFF;

  /* ============ BORDERS ============ */
  --mtu-border-subtle: rgba(255, 255, 255, 0.08);
  --mtu-border: rgba(255, 255, 255, 0.12);
  --mtu-border-strong: rgba(255, 255, 255, 0.20);
  --mtu-border-brand: rgba(210, 14, 54, 0.40);

  /* ============ FEEDBACK ============ */
  --mtu-success: #00E08A;
  --mtu-success-bg: rgba(0, 224, 138, 0.12);
  --mtu-warning: #FFB020;
  --mtu-warning-bg: rgba(255, 176, 32, 0.12);
  --mtu-error: #FF4757;
  --mtu-error-bg: rgba(255, 71, 87, 0.12);
  --mtu-info: #3B82F6;
  --mtu-info-bg: rgba(59, 130, 246, 0.12);

  /* ============ ACCENT ============ */
  --mtu-accent-gold: #FFD700;
  --mtu-accent-silver: #C0C0C0;
  --mtu-accent-platinum: #E5E4E2;

  /* ============ GRADIENTS ============ */
  --mtu-gradient-brand: linear-gradient(135deg, #D20E36 0%, #A00B28 100%);
  --mtu-gradient-brand-to-navy: linear-gradient(135deg, #D20E36 0%, #7A0E20 35%, #1B2A6B 70%, #0F0F2A 100%);
  --mtu-gradient-splash: linear-gradient(180deg, #E8344E 0%, #D20E36 25%, #7A0E20 50%, #1B2A6B 80%, #08081A 100%);
  --mtu-gradient-navy: linear-gradient(135deg, #2A3F8F 0%, #1B2A6B 50%, #0F1A4A 100%);
  --mtu-gradient-surface: linear-gradient(135deg, rgba(27,42,107,0.4) 0%, rgba(15,15,42,0.7) 100%);

  /* ============ SPACING (4px grid) ============ */
  --space-none: 0;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 40px;
  --space-5xl: 48px;
  --space-6xl: 64px;
  --space-7xl: 80px;
  --space-8xl: 96px;

  /* ============ RADIUS ============ */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ============ SHADOWS ============ */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-brand: 0 8px 24px rgba(210, 14, 54, 0.35);
  --shadow-glow: 0 0 32px rgba(210, 14, 54, 0.4);

  /* ============ TYPOGRAPHY ============ */
  --font-display: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Menlo', 'Monaco', monospace;

  --font-hero-size: 48px;
  --font-hero-line: 52px;
  --font-hero-tracking: -1.5px;

  --font-display-size: 36px;
  --font-display-line: 40px;
  --font-display-tracking: -1px;

  --font-h1-size: 28px;
  --font-h1-line: 32px;
  --font-h1-tracking: -0.8px;

  --font-h2-size: 22px;
  --font-h2-line: 26px;
  --font-h2-tracking: -0.5px;

  --font-h3-size: 18px;
  --font-h3-line: 22px;
  --font-h3-tracking: -0.3px;

  --font-h4-size: 16px;
  --font-h4-line: 20px;

  --font-body-size: 14px;
  --font-body-line: 20px;

  --font-body-large-size: 16px;
  --font-body-large-line: 24px;

  --font-label-size: 12px;
  --font-label-line: 16px;
  --font-label-tracking: 0.3px;

  --font-kicker-size: 11px;
  --font-kicker-line: 14px;
  --font-kicker-tracking: 2px;

  /* ============ ANIMATIONS ============ */
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ============ LAYOUT ============ */
  --layout-screen-padding: var(--space-lg);
  --layout-section-gap: var(--space-3xl);
  --layout-button-height: 48px;
  --layout-button-height-sm: 36px;
  --layout-input-height: 52px;
  --layout-max-width: 1200px;
}

/* ========================================================================
   COMPONENT BASES — opt-in classes, not global resets
   ========================================================================= */

/* Buttons */
.mtu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  height: var(--layout-button-height);
  padding: 0 var(--space-xl);
  border: 0;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--duration-fast) var(--easing-standard),
              opacity var(--duration-fast) var(--easing-standard),
              box-shadow var(--duration-base) var(--easing-standard);
  white-space: nowrap;
}
.mtu-btn:active { transform: scale(0.97); }
.mtu-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.mtu-btn--primary {
  background: var(--mtu-gradient-brand);
  color: var(--mtu-text-on-brand);
  box-shadow: var(--shadow-brand);
}
.mtu-btn--primary:hover { box-shadow: var(--shadow-glow); }

.mtu-btn--secondary {
  background: var(--mtu-bg-elevated);
  color: var(--mtu-text-primary);
  border: 1px solid var(--mtu-border);
}
.mtu-btn--secondary:hover { border-color: var(--mtu-border-strong); }

.mtu-btn--ghost {
  background: transparent;
  color: var(--mtu-text-primary);
}
.mtu-btn--ghost:hover { background: var(--mtu-bg-surface, rgba(255,255,255,0.05)); }

.mtu-btn--danger {
  background: var(--mtu-error-bg);
  color: var(--mtu-error);
  border: 1px solid rgba(255, 71, 87, 0.4);
}

.mtu-btn--sm { height: var(--layout-button-height-sm); padding: 0 var(--space-md); font-size: 13px; }
.mtu-btn--lg { height: 56px; padding: 0 var(--space-2xl); font-size: 17px; }
.mtu-btn--full { width: 100%; }

/* Cards */
.mtu-card {
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  background: var(--mtu-bg-elevated);
  border: 1px solid var(--mtu-border-subtle);
}
.mtu-card--elevated {
  border-color: var(--mtu-border);
  box-shadow: var(--shadow-lg);
}
.mtu-card--outline {
  background: transparent;
  border-color: var(--mtu-border);
}
.mtu-card--glass {
  background: rgba(27, 42, 107, 0.35);
  border-color: var(--mtu-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Badges */
.mtu-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--radius-full);
  border: 1px solid var(--mtu-border);
  background: var(--mtu-bg-elevated);
  color: var(--mtu-text-primary);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.mtu-badge--brand {
  background: rgba(210, 14, 54, 0.15);
  border-color: var(--mtu-brand-red);
  color: var(--mtu-brand-red-light);
}
.mtu-badge--success { background: var(--mtu-success-bg); border-color: rgba(0,224,138,0.4); color: var(--mtu-success); }
.mtu-badge--warning { background: var(--mtu-warning-bg); border-color: rgba(255,176,32,0.4); color: var(--mtu-warning); }
.mtu-badge--error   { background: var(--mtu-error-bg);   border-color: rgba(255,71,87,0.4);  color: var(--mtu-error); }
.mtu-badge--info    { background: var(--mtu-info-bg);    border-color: rgba(59,130,246,0.4); color: var(--mtu-info); }
.mtu-badge--sm { padding: 3px 8px; font-size: 10px; gap: 4px; }

/* Headings (semantic helpers) */
.mtu-hero    { font-family: var(--font-display); font-size: var(--font-hero-size);    line-height: var(--font-hero-line);    letter-spacing: var(--font-hero-tracking);    font-weight: 900; color: var(--mtu-text-primary); margin: 0; }
.mtu-display { font-family: var(--font-display); font-size: var(--font-display-size); line-height: var(--font-display-line); letter-spacing: var(--font-display-tracking); font-weight: 800; color: var(--mtu-text-primary); margin: 0; }
.mtu-h1      { font-family: var(--font-display); font-size: var(--font-h1-size);      line-height: var(--font-h1-line);      letter-spacing: var(--font-h1-tracking);      font-weight: 800; color: var(--mtu-text-primary); margin: 0; }
.mtu-h2      { font-family: var(--font-display); font-size: var(--font-h2-size);      line-height: var(--font-h2-line);      letter-spacing: var(--font-h2-tracking);      font-weight: 700; color: var(--mtu-text-primary); margin: 0; }
.mtu-h3      { font-family: var(--font-display); font-size: var(--font-h3-size);      line-height: var(--font-h3-line);      letter-spacing: var(--font-h3-tracking);      font-weight: 700; color: var(--mtu-text-primary); margin: 0; }
.mtu-h4      { font-family: var(--font-body);    font-size: var(--font-h4-size);      line-height: var(--font-h4-line);      font-weight: 700; color: var(--mtu-text-primary); margin: 0; }
.mtu-body    { font-family: var(--font-body);    font-size: var(--font-body-size);    line-height: var(--font-body-line);    color: var(--mtu-text-secondary); margin: 0; }
.mtu-body-lg { font-family: var(--font-body);    font-size: var(--font-body-large-size); line-height: var(--font-body-large-line); color: var(--mtu-text-primary); margin: 0; }
.mtu-label   { font-family: var(--font-body);    font-size: var(--font-label-size);   line-height: var(--font-label-line);   letter-spacing: var(--font-label-tracking); font-weight: 600; color: var(--mtu-text-tertiary); margin: 0; }
.mtu-kicker  { font-family: var(--font-body);    font-size: var(--font-kicker-size);  line-height: var(--font-kicker-line);  letter-spacing: var(--font-kicker-tracking); font-weight: 700; text-transform: uppercase; color: var(--mtu-brand-red-light); margin: 0; }

/* Color helper utilities */
.mtu-text-brand   { color: var(--mtu-brand-red); }
.mtu-text-primary { color: var(--mtu-text-primary); }
.mtu-text-muted   { color: var(--mtu-text-muted); }
.mtu-bg-elevated  { background: var(--mtu-bg-elevated); }
.mtu-bg-primary   { background: var(--mtu-bg-primary); }

/* Inputs */
.mtu-input {
  display: block;
  width: 100%;
  height: var(--layout-input-height);
  padding: 0 var(--space-lg);
  background: var(--mtu-bg-elevated);
  border: 1px solid var(--mtu-border);
  border-radius: var(--radius-md);
  color: var(--mtu-text-primary);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
  transition: border-color var(--duration-fast) var(--easing-standard),
              box-shadow var(--duration-fast) var(--easing-standard);
}
.mtu-input::placeholder { color: var(--mtu-text-muted); }
.mtu-input:hover { border-color: var(--mtu-border-strong); }
.mtu-input:focus {
  outline: 0;
  border-color: var(--mtu-brand-red);
  box-shadow: 0 0 0 3px rgba(210, 14, 54, 0.18);
}
.mtu-input:disabled { opacity: 0.5; cursor: not-allowed; }
.mtu-input--error { border-color: var(--mtu-error); }
.mtu-input--error:focus { box-shadow: 0 0 0 3px rgba(255, 71, 87, 0.18); }

textarea.mtu-input { height: auto; min-height: 96px; padding: var(--space-md) var(--space-lg); resize: vertical; }
select.mtu-input { appearance: none; padding-right: var(--space-3xl); cursor: pointer; }

.mtu-label-field {
  display: block;
  font-family: var(--font-body);
  font-size: var(--font-label-size);
  line-height: var(--font-label-line);
  letter-spacing: var(--font-label-tracking);
  font-weight: 600;
  color: var(--mtu-text-tertiary);
  margin: 0 0 var(--space-sm);
  text-transform: uppercase;
}

.mtu-help { font-size: 12px; color: var(--mtu-text-muted); margin: var(--space-sm) 0 0; }
.mtu-help--error { color: var(--mtu-error); }

/* Links */
.mtu-link {
  color: var(--mtu-brand-red-light);
  text-decoration: none;
  transition: color var(--duration-fast) var(--easing-standard);
}
.mtu-link:hover { color: var(--mtu-brand-red); text-decoration: underline; }
.mtu-link--muted { color: var(--mtu-text-secondary); }
.mtu-link--muted:hover { color: var(--mtu-text-primary); }

/* Divider */
.mtu-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mtu-border), transparent);
  border: 0;
  margin: var(--space-2xl) 0;
}
.mtu-divider--solid { background: var(--mtu-border); }

/* Layout primitives */
.mtu-stack    { display: flex; flex-direction: column; gap: var(--space-lg); }
.mtu-stack-sm { display: flex; flex-direction: column; gap: var(--space-sm); }
.mtu-stack-xl { display: flex; flex-direction: column; gap: var(--space-2xl); }
.mtu-row      { display: flex; align-items: center; gap: var(--space-md); }
.mtu-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.mtu-cluster  { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.mtu-grid-2   { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
.mtu-grid-3   { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.mtu-grid-4   { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }

@media (max-width: 640px) {
  .mtu-grid-2, .mtu-grid-3, .mtu-grid-4 { grid-template-columns: 1fr; }
}

/* Focus ring (a11y) — apply to any focusable element via .mtu-focus-ring */
.mtu-focus-ring:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(210, 14, 54, 0.4);
  border-radius: var(--radius-sm);
}

/* Section wrapper */
.mtu-section {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: var(--layout-section-gap) var(--layout-screen-padding);
}

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE BASELINE — global mobile + iPad shim (added 2026-05-08)
   Applies to every page that loads /css/mtu-design-system.css. Fixes the
   universal pain points: horizontal scroll, oversized media, runaway
   tables, tap targets too small, hero/section padding too large on phone.
   ════════════════════════════════════════════════════════════════════════ */

/* 1) Stop any horizontal scroll. Common offenders: long fixed-width tables,
      hero backgrounds with negative margins, oversized images, embedded
      iframes that ignore the viewport. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* 2) Make all media + embeds fluid by default (only when the page hasn't
      explicitly sized them). `width:auto` lets inline width attributes win. */
img, video, iframe, embed, object, picture, canvas, svg:not(:root) {
  max-width: 100%;
  height: auto;
}

/* 3) Tables on mobile: wrap them so they scroll inside their container
      instead of stretching the page. Apply to bare <table> only — sections
      that already opt in (`.cm-tbl-scroll`, `.rop-scroll`, etc.) keep their
      explicit wrapper. */
@media (max-width: 760px) {
  table:not(.cm-tbl):not(.rop-tbl) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* 4) Touch targets — anchors/buttons need 44×44 minimum on touch devices
      per WCAG 2.5.5 / Apple HIG. Only enforce when device truly is touch. */
@media (pointer: coarse) {
  a.btn, button.btn,
  .btn, .btn-store, .btn-gold, .btn-primary, .btn-secondary, .btn-outline,
  .nav-link, .nav-cta, .footer-link {
    min-height: 44px;
  }
}

/* 5) Hero + section padding shrink on phones. Many legacy heroes were
      authored with `padding: 120px 24px` desktop-only. */
@media (max-width: 768px) {
  .hero, section.hero, .hero-section {
    padding-top: 88px !important;
    padding-bottom: 56px !important;
  }
  .section, section.section, .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
@media (max-width: 480px) {
  .hero, section.hero, .hero-section {
    padding-top: 72px !important;
    padding-bottom: 44px !important;
  }
}

/* 6) Generic fluid headings — only kicks in when the page hasn't already
      defined font-size on `.section-title` / `.hero h1`. Uses clamp so we
      never blow past the desktop value. */
@media (max-width: 768px) {
  .hero h1, .hero-title {
    font-size: clamp(28px, 7vw, 44px) !important;
    line-height: 1.15 !important;
  }
  .section-title, .section h2 {
    font-size: clamp(22px, 5vw, 34px) !important;
    line-height: 1.2 !important;
  }
  .section-subtitle, .section p {
    font-size: 14.5px;
    line-height: 1.6;
  }
}

/* 7) Common grid patterns collapse cleanly. Catches legacy `auto-fit
      minmax(280px, 1fr)` grids that already collapse, and explicit
      multi-column grids that don't. */
@media (max-width: 1024px) {
  .features-grid, .stats-grid, .grid-3, .grid-4,
  .why-grid, .steps-grid, .fleet-grid, .pricing-grid,
  .testimonial-grid, .integration-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 600px) {
  .features-grid, .stats-grid, .grid-2, .grid-3, .grid-4,
  .why-grid, .steps-grid, .fleet-grid, .pricing-grid,
  .testimonial-grid, .integration-grid,
  .cities-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 8) Buttons rows wrap and full-width on tiny phones. */
@media (max-width: 480px) {
  .hero-buttons, .cta-row, .btn-row {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .hero-buttons > a, .hero-buttons > button,
  .cta-row > a, .cta-row > button,
  .btn-row > a, .btn-row > button {
    width: 100%;
    justify-content: center;
  }
}

/* 9) Long words / URLs / emails don't blow out card widths on mobile. */
@media (max-width: 600px) {
  p, li, td, dd, dt, blockquote, .card, .card * {
    overflow-wrap: anywhere;
    word-break: normal;
  }
}

/* 10) Pre/code blocks scroll instead of overflowing. */
pre, code {
  max-width: 100%;
}
pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}