/* =============================================
   MB CAR — Design System Variables
   ============================================= */

:root {
  /* ── Brand Colors ── */
  --c-black:        #000000;
  --c-dark:         #111111;
  --c-footer:       #0b0b0b;
  --c-footer-bd:    #1a1a1a;
  --c-footer-text:  #888888;

  /* ── Blues ── */
  --c-blue:         #2563EB;
  --c-accent:       #3B82F6;
  --c-accent-hover: #2563EB;
  --c-blue-light:   #EFF6FF;
  --c-blue-border:  #BFDBFE;

  /* ── Grays ── */
  --c-gray-50:      #F9FAFB;
  --c-gray-100:     #F3F4F6;
  --c-gray-bg:      #F5F5F7;
  --c-gray-200:     #E5E7EB;
  --c-gray-300:     #D1D5DB;
  --c-gray-400:     #9CA3AF;
  --c-gray-500:     #6B7280;
  --c-gray-600:     #4B5563;
  --c-gray-700:     #374151;
  --c-gray-800:     #1F2937;
  --c-gray-900:     #111827;

  /* ── Status Colors ── */
  --c-green:        #16A34A;
  --c-green-light:  #DCFCE7;
  --c-orange:       #EA580C;
  --c-orange-light: #FFF7ED;
  --c-red:          #DC2626;
  --c-red-light:    #FEF2F2;

  /* ── Base ── */
  --c-white:        #ffffff;
  --c-text:         #111827;
  --c-text-muted:   #6B7280;
  --c-text-light:   #9CA3AF;
  --c-border:       #E5E7EB;
  --c-border-input: #D1D5DB;

  /* ── Typography ── */
  --font:           'Inter', system-ui, -apple-system, sans-serif;
  --fw-light:       300;
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;
  --fw-extrabold:   800;

  /* ── Font Sizes ── */
  --fs-xs:    0.75rem;    /* 12px */
  --fs-sm:    0.875rem;   /* 14px */
  --fs-base:  1rem;       /* 16px */
  --fs-lg:    1.125rem;   /* 18px */
  --fs-xl:    1.25rem;    /* 20px */
  --fs-2xl:   1.5rem;     /* 24px */
  --fs-3xl:   1.875rem;   /* 30px */
  --fs-4xl:   2.25rem;    /* 36px */
  --fs-5xl:   3rem;       /* 48px */
  --fs-6xl:   3.75rem;    /* 60px */
  --fs-7xl:   4.5rem;     /* 72px */

  /* ── Spacing (4px base) ── */
  --sp-1:   0.25rem;   /* 4px  */
  --sp-2:   0.5rem;    /* 8px  */
  --sp-3:   0.75rem;   /* 12px */
  --sp-4:   1rem;      /* 16px */
  --sp-5:   1.25rem;   /* 20px */
  --sp-6:   1.5rem;    /* 24px */
  --sp-8:   2rem;      /* 32px */
  --sp-10:  2.5rem;    /* 40px */
  --sp-12:  3rem;      /* 48px */
  --sp-16:  4rem;      /* 64px */
  --sp-20:  5rem;      /* 80px */
  --sp-24:  6rem;      /* 96px */

  /* ── Layout ── */
  --container-max:  1280px;
  --container-px:   1rem;
  --header-h:       80px;
  --topbar-h:       36px;

  /* ── Border Radius ── */
  --r-sm:   0.375rem;  /* 6px  */
  --r-md:   0.5rem;    /* 8px  */
  --r-lg:   0.75rem;   /* 12px */
  --r-xl:   1rem;      /* 16px */
  --r-2xl:  1.5rem;    /* 24px */
  --r-3xl:  1.875rem;  /* 30px */
  --r-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 2px rgba(0,0,0,.05);
  --shadow:     0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,.25);

  /* ── Transitions ── */
  --t-fast:   150ms ease;
  --t-base:   200ms ease;
  --t-slow:   300ms ease;
  --t-slower: 500ms ease;

  /* ── Z-Index ── */
  --z-header:   50;
  --z-dropdown: 100;
  --z-modal:    200;
}

@media (min-width: 1024px) {
  :root {
    --container-px: 2rem;
  }
}