/* ============================================================
   MobileFrota Design System — bundle (fonts + colors + type + spacing + base)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* ---- Brand blue ramp ---- */
  --blue-900: #1e3a8a;
  --blue-800: #1e40af;
  --blue-700: #1d4ed8;
  --blue-600: #2563eb;
  --blue-500: #3b82f6;
  --blue-400: #60a5fa;
  --blue-300: #93c5fd;
  --blue-200: #bfdbfe;
  --blue-100: #dbeafe;
  --blue-50:  #eff6ff;

  /* ---- Green accent ---- */
  --green-700: #15803d;
  --green-600: #16a34a;
  --green-500: #22c55e;
  --green-400: #4ade80;
  --green-100: #dcfce7;
  --green-50:  #f0fdf4;

  /* ---- Status / semantic hues ---- */
  --orange-600: #ea580c;
  --orange-500: #f97316;
  --orange-100: #ffedd5;
  --red-600:    #dc2626;
  --red-500:    #ef4444;
  --red-100:    #fee2e2;
  --amber-500:  #eab308;
  --amber-400:  #facc15;
  --amber-100:  #fef9c3;
  --violet-600: #7c3aed;
  --violet-500: #8b5cf6;
  --violet-100: #ede9fe;

  /* ---- Neutral / slate ramp ---- */
  --slate-950: #0b1220;
  --slate-900: #0f172a;
  --slate-850: #131c2e;
  --slate-800: #1e293b;
  --slate-750: #243149;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-50:  #f8fafc;
  --white:     #ffffff;

  /* ---- Semantic aliases (light) ---- */
  --surface-page:     var(--slate-50);
  --surface-card:     var(--white);
  --surface-sunken:   var(--slate-100);
  --surface-accent:   var(--blue-50);
  --border-subtle:    var(--slate-200);
  --border-strong:    var(--slate-300);
  --text-strong:      var(--slate-900);
  --text-body:        var(--slate-700);
  --text-muted:       var(--slate-500);
  --text-on-brand:    var(--white);
  --text-link:        var(--blue-600);
  --brand:            var(--blue-600);
  --brand-strong:     var(--blue-700);
  --brand-deep:       var(--blue-900);
  --accent:           var(--green-500);
  --accent-strong:    var(--green-600);
  --grad-brand: linear-gradient(100deg, var(--blue-900) 0%, var(--blue-600) 100%);

  /* ---- Typography ---- */
  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num:     "Manrope", ui-monospace, "Segoe UI", sans-serif;
  --fw-regular:  400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extra: 800;
  --fs-display:  clamp(2.5rem, 1.6rem + 3.4vw, 4rem);
  --fs-h1:       clamp(2rem, 1.5rem + 1.8vw, 2.75rem);
  --fs-h2:       clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  --fs-h3:       1.375rem;
  --fs-h4:       1.125rem;
  --fs-lead:     1.1875rem;
  --fs-body:     1rem;
  --fs-sm:       0.875rem;
  --fs-xs:       0.75rem;
  --fs-overline: 0.6875rem;
  --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.65;
  --ls-tight: -0.02em; --ls-normal: 0; --ls-overline: 0.08em;

  /* ---- Spacing / radii / shadows / motion ---- */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem;
  --radius-xs: 6px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px;
  --shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm:  0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:  0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg:  0 12px 28px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.06);
  --shadow-xl:  0 24px 56px rgba(15, 23, 42, 0.18), 0 8px 16px rgba(15, 23, 42, 0.08);
  --shadow-brand: 0 12px 30px rgba(37, 99, 235, 0.30);
  --ring: 0 0 0 3px rgba(37, 99, 235, 0.35);
  --container: 1200px; --container-sm: 960px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--font-text); font-size: var(--fs-body);
  line-height: var(--lh-normal); color: var(--text-body); background: var(--surface-page);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  font-family: var(--font-display); color: var(--text-strong);
  line-height: var(--lh-tight); letter-spacing: var(--ls-tight); margin: 0;
}
a { color: var(--text-link); text-decoration: none; }