/* =========================================================
   JMAC ASSET RECOVERY — Foundations
   Colors, Type, Spacing, Radii, Shadows, Motion
   ========================================================= */

/* ---------- FONTS ----------------------------------------
   Display: Industry (italic / condensed) — substituted with
            "Oswald" + italic skew via Google Fonts (FLAGGED)
   Body:    Inter (open, neutral grotesque) — placeholder until
            brand provides preferred body face
   Mono:    JetBrains Mono — for case numbers, VINs, plates
   --------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Barlow+Condensed:ital,wght@0,400;0,500;0,600;0,700;0,800;1,600;1,700;1,800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  /* ============== COLOR — RAW PALETTE ================ */

  /* Steel / Chrome (logo lettering — silver gradient) */
  --steel-50:  #f5f7f9;
  --steel-100: #e6eaee;
  --steel-200: #cbd2db;
  --steel-300: #a8b2bf;
  --steel-400: #7d8896;
  --steel-500: #5a6473;
  --steel-600: #404954;
  --steel-700: #2c333c;
  --steel-800: #1a1f26;
  --steel-900: #0d1117;

  /* Recovery Blue (logo outline — deep navy/royal) */
  --blue-50:  #eef3fb;
  --blue-100: #d6e3f5;
  --blue-200: #adc6eb;
  --blue-300: #7ea4dd;
  --blue-400: #4f7fcd;
  --blue-500: #2a5cb8;   /* primary brand blue */
  --blue-600: #1e4795;
  --blue-700: #163672;
  --blue-800: #0f2750;
  --blue-900: #081634;

  /* Caution Amber — repossession industry cue (hazard / dispatch) */
  --amber-300: #ffd14a;
  --amber-400: #ffb81c;   /* primary accent */
  --amber-500: #e69e00;
  --amber-600: #b87a00;

  /* Status semantics */
  --success-500: #1f8a4c;
  --warning-500: #e69e00;
  --danger-500:  #c8302b;
  --info-500:    #2a5cb8;

  /* Pure */
  --black: #000000;
  --white: #ffffff;

  /* ============== SEMANTIC SURFACES ================== */
  --bg-page:        var(--white);
  --bg-subtle:      var(--steel-50);
  --bg-muted:       var(--steel-100);
  --bg-inverse:     var(--steel-900);
  --bg-inverse-2:   var(--blue-900);

  --fg-1:           var(--steel-900);   /* primary text */
  --fg-2:           var(--steel-700);   /* body text */
  --fg-3:           var(--steel-500);   /* muted / meta */
  --fg-4:           var(--steel-400);   /* placeholder */
  --fg-on-dark:     var(--white);
  --fg-on-blue:     var(--white);
  --fg-on-amber:    var(--steel-900);

  --brand-primary:  var(--blue-700);
  --brand-primary-hover: var(--blue-800);
  --brand-accent:   var(--amber-400);
  --brand-accent-hover:  var(--amber-500);
  --brand-ink:      var(--steel-900);

  --border-1:       var(--steel-200);
  --border-2:       var(--steel-300);
  --border-strong:  var(--steel-700);
  --divider:        var(--steel-100);

  /* ============== TYPOGRAPHY — RAW ==================== */
  --font-display:  'Barlow Condensed', 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --font-body:     'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Type scale (1.250 — major third) */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;
  --tracking-caps:   0.12em;

  /* ============== SPACING (4px base) ================== */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ============== RADII ============================== */
  --radius-0:   0;
  --radius-sm:  2px;
  --radius-md:  4px;
  --radius-lg:  6px;
  --radius-xl:  10px;
  --radius-pill: 999px;

  /* ============== SHADOWS / ELEVATION ================= */
  --shadow-1: 0 1px 2px rgba(13,17,23,0.08), 0 1px 1px rgba(13,17,23,0.04);
  --shadow-2: 0 2px 4px rgba(13,17,23,0.10), 0 1px 2px rgba(13,17,23,0.06);
  --shadow-3: 0 6px 16px rgba(13,17,23,0.12), 0 2px 4px rgba(13,17,23,0.08);
  --shadow-4: 0 16px 32px rgba(13,17,23,0.16), 0 4px 8px rgba(13,17,23,0.08);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.25);
  --shadow-focus: 0 0 0 3px rgba(42,92,184,0.35);

  /* Chrome/steel gradient — used sparingly on display marks */
  --gradient-chrome: linear-gradient(
    180deg,
    #e9ecef 0%,
    #c0c8d2 18%,
    #6e7785 50%,
    #b6bdc8 82%,
    #f3f5f8 100%
  );

  /* Industrial diagonal-stripe pattern (caution/hazard reference) */
  --pattern-hazard: repeating-linear-gradient(
    -45deg,
    var(--amber-400) 0 14px,
    var(--steel-900) 14px 28px
  );

  /* ============== MOTION ============================== */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:    cubic-bezier(0.6, 0, 0.8, 0.4);
  --ease-snap:  cubic-bezier(0.2, 0.9, 0.1, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 500ms;

  /* Layout */
  --container-max: 1280px;
  --container-narrow: 880px;
}

/* ============== SEMANTIC TYPE TOKENS ===================== */

.h-display, h1.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(48px, 7vw, 96px);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--fg-1);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(36px, 5vw, 60px);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 42px);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-normal);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-normal);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand-primary);
}

p, .p {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: var(--fg-2);
  margin: 0;
}

.lead {
  font-family: var(--font-body);
  font-size: var(--fs-20);
  line-height: var(--lh-base);
  color: var(--fg-2);
  font-weight: 400;
}

.small, small {
  font-size: var(--fs-14);
  line-height: var(--lh-base);
  color: var(--fg-3);
}

.meta {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--fg-3);
}

code, .code, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--fg-1);
}

/* Reset helpers used across cards */
*, *::before, *::after { box-sizing: border-box; }