/* ═══════════════════════════════════════════════════
   ServicePilot Pro — Design System v2
   Motorsport × Premium SaaS
   Warm, bold, distinctive. Zero blue/teal.
   ═══════════════════════════════════════════════════ */

:root {
  /* ── Backgrounds ── */
  --color-bg-base:       #0A0A0F;
  --color-bg-surface:    #14141F;
  --color-bg-elevated:   #1A1A2E;
  --color-bg-card:       #1E1E32;
  --color-bg-overlay:    rgba(10, 10, 15, 0.85);

  /* ── Accents ── */
  --color-accent:           #FF4D2E;
  --color-accent-hover:     #FF6B4A;
  --color-accent-subtle:    rgba(255, 77, 46, 0.12);
  --color-accent-glow:      rgba(255, 77, 46, 0.25);

  --color-gold:             #F5A623;
  --color-gold-hover:       #F7B84E;
  --color-gold-subtle:      rgba(245, 166, 35, 0.12);

  /* ── Text ── */
  --color-text-primary:    #F5F5F7;
  --color-text-secondary:  #A0A0B0;
  --color-text-muted:      #6B6B7B;
  --color-text-inverse:    #0A0A0F;

  /* ── Borders ── */
  --color-border:          rgba(255, 255, 255, 0.06);
  --color-border-accent:   rgba(255, 77, 46, 0.20);
  --color-border-gold:     rgba(245, 166, 35, 0.20);

  /* ── Gradients ── */
  --gradient-accent:       linear-gradient(135deg, #FF4D2E 0%, #F5A623 100%);
  --gradient-accent-hover: linear-gradient(135deg, #FF6B4A 0%, #F7B84E 100%);
  --gradient-hero:         linear-gradient(160deg, #0A0A0F 0%, #14141F 35%, #1A1420 65%, #0A0A0F 100%);
  --gradient-card:         linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  --gradient-cta:          linear-gradient(135deg, #FF4D2E, #E8411D);

  /* ── Shadows ── */
  --shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:        0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:        0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-accent:    0 0 40px rgba(255, 77, 46, 0.18);
  --shadow-accent-lg: 0 0 80px rgba(255, 77, 46, 0.12);
  --shadow-gold:      0 0 30px rgba(245, 166, 35, 0.12);

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

  /* ── Font ── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-family: var(--font-sans);
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--color-bg-base);
  min-height: 100vh;
}

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 { color: var(--color-text-primary); font-weight: 700; }
p { color: var(--color-text-secondary); line-height: 1.65; }

/* ── Links ── */
a { color: var(--color-accent); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--color-accent-hover); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 28px; border-radius: var(--radius-md);
  font-weight: 600; font-size: 15px;
  cursor: pointer; transition: all 0.25s ease;
  border: none; text-decoration: none;
  letter-spacing: 0.2px;
}
.btn-primary {
  background: var(--gradient-accent);
  color: #FFFFFF;
  box-shadow: var(--shadow-accent);
}
.btn-primary:hover {
  background: var(--gradient-accent-hover);
  box-shadow: var(--shadow-accent-lg);
  transform: translateY(-1px);
}
.btn-secondary {
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.04);
  border-color: var(--color-border-accent);
}
.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
}
.btn-ghost:hover { color: var(--color-text-primary); background: rgba(255,255,255,0.03); }

/* ── Cards ── */
.card {
  background: var(--gradient-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: border-color 0.25s, transform 0.25s;
}
.card:hover {
  border-color: var(--color-border-accent);
  transform: translateY(-2px);
}

/* ── Badges ── */
.badge {
  display: inline-flex; align-items: center;
  padding: 5px 14px; border-radius: var(--radius-full);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.5px; text-transform: uppercase;
}
.badge-accent {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  border: 1px solid var(--color-border-accent);
}
.badge-gold {
  background: var(--color-gold-subtle);
  color: var(--color-gold);
  border: 1px solid var(--color-border-gold);
}

/* ── Surfaces ── */
.surface { background: var(--color-bg-surface); }
.surface-elevated { background: var(--color-bg-elevated); }

/* ── Dividers ── */
hr {
  border: none;
  height: 1px;
  background: var(--color-border);
  margin: 24px 0;
}

/* ── Glow effects ── */
.glow-accent {
  box-shadow: var(--shadow-accent);
}
.glow-gold {
  box-shadow: var(--shadow-gold);
}

.shadow-accent-sm { box-shadow: 0 0 20px rgba(255,77,46,0.20); }
.accent-gradient { background: linear-gradient(135deg, #FF4D2E 0%, #C63510 100%); }
.divider-accent { height: 4px; width: 60px; background: linear-gradient(135deg, #FF4D2E, #FF6B4A); border-radius: 2px; }

/* ── Utility accent background classes (for Tailwind CDN compat) ── */
.bg-accent { background: #FF4D2E; }
.bg-accent-light { background: rgba(255,77,46,0.30); }
.bg-accent-medium { background: rgba(255,77,46,0.60); }
.bg-accent-deep { background: #E8411D; }
.bg-accent-dark { background: #C63510; }
.hover\:bg-accent-deep:hover { background: #E8411D; }
.hover\:bg-accent-dark:hover { background: #C63510; }
.hover\:bg-accent:hover { background: #FF6B4A; }
.bg-accent-subtle { background: rgba(255,77,46,0.05); }
.bg-accent-muted { background: rgba(255,77,46,0.10); }
.bg-accent-soft { background: rgba(255,77,46,0.20); }
.text-coral { color: #FF4D2E; }
.text-coral-muted { color: rgba(255,77,46,0.70); }
.text-coral-hover:hover { color: #FF6B4A; }

/* ── Glass morphism ── */
.glass {
  background: rgba(20, 20, 31, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--color-border);
}