/* =============================================================
   MotorHub Design System · colors_and_type.css
   Imported verbatim from the Claude Design project
   (_ds/motorhub-design-system-097c4e2b-bba1-4230-85f0-fcb677ae1c0a).
   Do not hand-edit — re-pull from the design system instead.
   ============================================================= */

/* --- Fonts ---------------------------------------------------- */
/* Display + UI: Sora (geometric, confident, Kuwait-friendly Latin) */
/* Body: Inter (fallback-safe, excellent mobile rendering) */
/* Mono: JetBrains Mono (technical specs, VINs, prices in listings) */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ------------------------------------------------------------
     CORE PALETTE
     Inspired by: night-garage floors, xenon headlamps,
     machined aluminum, safety orange work-lights, OEM paint.
     ------------------------------------------------------------ */

  /* Ink — the signature deep blue-black. Used for app chrome,
     primary CTAs, headers. Not pure black — it has a hint of
     cobalt, so it feels automotive (instrument-cluster) not morbid. */
  --mh-ink-900: #0B1220;        /* near-black, app shell */
  --mh-ink-800: #111A2E;        /* surface raised-1 */
  --mh-ink-700: #1A2540;        /* surface raised-2 */
  --mh-ink-600: #273450;        /* borders on dark */
  --mh-ink-500: #3A4866;        /* muted text on dark */
  --mh-ink-400: #5A6785;        /* tertiary text on dark */

  /* Signal — the ignition orange. Primary accent for CTAs,
     active states, progress, live indicators. Used sparingly. */
  --mh-signal-700: #B84A12;
  --mh-signal-600: #E55A17;     /* primary accent */
  --mh-signal-500: #FF6A1A;     /* primary hover / focus */
  --mh-signal-400: #FF8A4C;
  --mh-signal-100: #FFE8D9;     /* tinted badges, soft fills */

  /* Chrome — neutral greys, slightly cool. Backgrounds, dividers,
     chips, secondary surfaces on light UI. */
  --mh-chrome-50:  #F6F7F9;     /* app bg (light mode) */
  --mh-chrome-100: #EDEFF3;     /* card bg alt */
  --mh-chrome-200: #DFE3EB;     /* hairline borders */
  --mh-chrome-300: #C4CAD6;     /* disabled controls */
  --mh-chrome-400: #9AA2B3;     /* muted icons */
  --mh-chrome-500: #6B7487;     /* tertiary text */
  --mh-chrome-600: #4B5467;     /* secondary text */
  --mh-chrome-700: #2F3649;     /* strong text on light */

  /* Pure whites/blacks for max contrast moments */
  --mh-white: #FFFFFF;
  --mh-black: #000000;

  /* ------------------------------------------------------------
     SEMANTIC COLORS
     ------------------------------------------------------------ */
  --mh-success-600: #10946B;    /* job completed, car ready */
  --mh-success-500: #1FB985;
  --mh-success-100: #DDF5EA;

  --mh-warn-600: #C98410;       /* scheduled, waiting for parts */
  --mh-warn-500: #E9A017;
  --mh-warn-100: #FFEFCC;

  --mh-danger-600: #C32B2B;     /* tow needed, urgent */
  --mh-danger-500: #E23A3A;
  --mh-danger-100: #FCE0E0;

  --mh-info-600: #1F64C6;       /* live auction, notifications */
  --mh-info-500: #2E7FE6;
  --mh-info-100: #DCEBFD;

  /* ------------------------------------------------------------
     SURFACE / SEMANTIC TOKENS (light mode default)
     Prefer these in components over raw palette vars.
     ------------------------------------------------------------ */
  --mh-bg:           var(--mh-chrome-50);
  --mh-bg-raised:    var(--mh-white);
  --mh-bg-inverse:   var(--mh-ink-900);
  --mh-bg-subtle:    var(--mh-chrome-100);

  --mh-fg:           var(--mh-ink-900);      /* primary text */
  --mh-fg-2:         var(--mh-chrome-700);   /* secondary */
  --mh-fg-3:         var(--mh-chrome-500);   /* tertiary / muted */
  --mh-fg-inverse:   var(--mh-white);
  --mh-fg-brand:     var(--mh-signal-600);

  --mh-border:       var(--mh-chrome-200);
  --mh-border-strong:var(--mh-chrome-300);
  --mh-border-focus: var(--mh-signal-500);

  --mh-accent:       var(--mh-signal-600);
  --mh-accent-hover: var(--mh-signal-500);
  --mh-accent-press: var(--mh-signal-700);
  --mh-on-accent:    var(--mh-white);

  /* ------------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------------ */
  --mh-font-display: 'Sora', 'Inter', system-ui, sans-serif;
  --mh-font-body:    'Inter', 'Sora', system-ui, sans-serif;
  --mh-font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Type scale — modular, 1.25 ratio on mobile, scales up on hero */
  --mh-text-xs:   11px;
  --mh-text-sm:   13px;
  --mh-text-md:   15px;   /* default body */
  --mh-text-lg:   17px;
  --mh-text-xl:   20px;
  --mh-text-2xl:  24px;
  --mh-text-3xl:  30px;
  --mh-text-4xl:  38px;
  --mh-text-5xl:  48px;
  --mh-text-6xl:  64px;   /* hero */

  --mh-leading-tight:  1.15;
  --mh-leading-snug:   1.3;
  --mh-leading-normal: 1.5;
  --mh-leading-relaxed:1.65;

  --mh-tracking-tight: -0.02em;  /* display */
  --mh-tracking-normal: 0;
  --mh-tracking-wide:  0.04em;
  --mh-tracking-label: 0.08em;   /* ALL-CAPS LABELS */

  /* ------------------------------------------------------------
     SPACING — 4px base unit
     ------------------------------------------------------------ */
  --mh-space-1: 4px;
  --mh-space-2: 8px;
  --mh-space-3: 12px;
  --mh-space-4: 16px;
  --mh-space-5: 20px;
  --mh-space-6: 24px;
  --mh-space-8: 32px;
  --mh-space-10: 40px;
  --mh-space-12: 48px;
  --mh-space-16: 64px;
  --mh-space-20: 80px;

  /* ------------------------------------------------------------
     RADII — slightly tight; this is a technical product, not fluffy.
     ------------------------------------------------------------ */
  --mh-radius-xs: 4px;
  --mh-radius-sm: 8px;
  --mh-radius-md: 12px;   /* default card */
  --mh-radius-lg: 16px;   /* hero card, modal */
  --mh-radius-xl: 24px;   /* sheet */
  --mh-radius-pill: 999px;

  /* ------------------------------------------------------------
     SHADOWS — two families:
       "lift" = outer soft shadows (cards, popovers)
       "press" = inner / focus rings
     Tuned for light surfaces; keep subtle.
     ------------------------------------------------------------ */
  --mh-shadow-xs: 0 1px 2px rgba(11, 18, 32, 0.06);
  --mh-shadow-sm: 0 2px 6px rgba(11, 18, 32, 0.06), 0 1px 2px rgba(11, 18, 32, 0.04);
  --mh-shadow-md: 0 6px 16px rgba(11, 18, 32, 0.08), 0 2px 4px rgba(11, 18, 32, 0.04);
  --mh-shadow-lg: 0 18px 40px rgba(11, 18, 32, 0.12), 0 6px 12px rgba(11, 18, 32, 0.06);
  --mh-shadow-xl: 0 32px 64px rgba(11, 18, 32, 0.18);
  --mh-shadow-ring-focus: 0 0 0 3px rgba(255, 106, 26, 0.28);
  --mh-shadow-ring-danger: 0 0 0 3px rgba(226, 58, 58, 0.25);

  /* ------------------------------------------------------------
     MOTION
     ------------------------------------------------------------ */
  --mh-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --mh-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --mh-dur-fast: 120ms;
  --mh-dur-base: 200ms;
  --mh-dur-slow: 320ms;

  /* ------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------ */
  --mh-container: 1200px;
  --mh-phone-w: 390px;
  --mh-phone-h: 844px;
  --mh-topbar-h: 56px;
  --mh-tabbar-h: 72px;
}

/* =============================================================
   BASE SEMANTIC TYPOGRAPHY CLASSES
   Use directly or extend in components.
   ============================================================= */
.mh-display-hero {
  font-family: var(--mh-font-display);
  font-weight: 800;
  font-size: var(--mh-text-6xl);
  line-height: var(--mh-leading-tight);
  letter-spacing: var(--mh-tracking-tight);
  color: var(--mh-fg);
}
.mh-h1 {
  font-family: var(--mh-font-display);
  font-weight: 700;
  font-size: var(--mh-text-4xl);
  line-height: var(--mh-leading-tight);
  letter-spacing: var(--mh-tracking-tight);
  color: var(--mh-fg);
}
.mh-h2 {
  font-family: var(--mh-font-display);
  font-weight: 700;
  font-size: var(--mh-text-3xl);
  line-height: var(--mh-leading-snug);
  letter-spacing: var(--mh-tracking-tight);
  color: var(--mh-fg);
}
.mh-h3 {
  font-family: var(--mh-font-display);
  font-weight: 600;
  font-size: var(--mh-text-2xl);
  line-height: var(--mh-leading-snug);
  color: var(--mh-fg);
}
.mh-h4 {
  font-family: var(--mh-font-display);
  font-weight: 600;
  font-size: var(--mh-text-xl);
  line-height: var(--mh-leading-snug);
  color: var(--mh-fg);
}
.mh-body {
  font-family: var(--mh-font-body);
  font-weight: 400;
  font-size: var(--mh-text-md);
  line-height: var(--mh-leading-normal);
  color: var(--mh-fg);
}
.mh-body-sm {
  font-family: var(--mh-font-body);
  font-weight: 400;
  font-size: var(--mh-text-sm);
  line-height: var(--mh-leading-normal);
  color: var(--mh-fg-2);
}
.mh-label {
  font-family: var(--mh-font-body);
  font-weight: 600;
  font-size: var(--mh-text-xs);
  letter-spacing: var(--mh-tracking-label);
  text-transform: uppercase;
  color: var(--mh-fg-3);
}
.mh-mono {
  font-family: var(--mh-font-mono);
  font-size: var(--mh-text-sm);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--mh-fg);
}
.mh-price {
  font-family: var(--mh-font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--mh-fg);
}

/* =============================================================
   BASELINE RESETS FOR ARTIFACTS (optional, but sensible)
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  font-family: var(--mh-font-body);
  font-size: var(--mh-text-md);
  color: var(--mh-fg);
  background: var(--mh-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}