/* CarDealer – Premium Design System */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg-0: #05060a;
  --bg-1: #0a0d16;
  --surface: #11141f;
  --surface-2: #161a28;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --gold-400: #fbbf5c;
  --gold-500: #f0a83c;
  --gold-600: #d98a1f;
  --violet-400: #8b8ff8;
  --violet-500: #6d6ff0;
  --emerald-400: #34d399;
  --rose-400: #fb7185;
}

* { scrollbar-color: var(--border-strong) transparent; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;
  background-color: var(--bg-0);
  background-image:
    radial-gradient(1100px 600px at 85% -10%, rgba(240, 168, 60, 0.14), transparent 60%),
    radial-gradient(900px 700px at -10% 20%, rgba(109, 111, 240, 0.14), transparent 55%),
    radial-gradient(1200px 800px at 50% 120%, rgba(52, 211, 153, 0.06), transparent 60%);
  background-attachment: fixed;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }

[x-cloak] { display: none !important; }

.gradient-text {
  background: linear-gradient(120deg, var(--gold-400), var(--gold-600));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-violet {
  background: linear-gradient(120deg, var(--violet-400), #b18cf5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.glass {
  background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
}

.glass-hover {
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease;
}
.glass-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -12px rgba(0,0,0,.55);
  border-color: var(--border-strong);
}

.btn-primary {
  background: linear-gradient(120deg, var(--gold-400), var(--gold-600));
  color: #1a1200;
  font-weight: 700;
  transition: filter .2s ease, transform .2s ease;
}
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: .45; filter: none; transform: none; cursor: not-allowed; }

.btn-ghost {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  color: #cbd2e1;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.btn-ghost:hover { background: rgba(255,255,255,0.06); border-color: var(--border-strong); color: #fff; }

.input-field {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  color: #fff;
  transition: border-color .2s ease, background .2s ease;
}
.input-field::placeholder { color: #5b6172; }
.input-field:focus {
  outline: none;
  border-color: var(--gold-500);
  background: rgba(255,255,255,0.05);
}

.status-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  padding: .3rem .65rem; border-radius: 999px;
  text-transform: uppercase;
}
.status-blue   { color: #93c5fd; background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.25); }
.status-amber  { color: #fcd34d; background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.25); }
.status-violet { color: #c4b5fd; background: rgba(139,143,248,.14); border: 1px solid rgba(139,143,248,.28); }
.status-green  { color: #6ee7b7; background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.25); }
.status-red    { color: #fda4af; background: rgba(251,113,133,.12); border: 1px solid rgba(251,113,133,.25); }
.status-gray   { color: #9ca3af; background: rgba(156,163,175,.10); border: 1px solid rgba(156,163,175,.2); }

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-in { animation: fade-in-up .5s cubic-bezier(.2,.8,.2,1) both; }
.delay-1 { animation-delay: .05s; }
.delay-2 { animation-delay: .1s; }
.delay-3 { animation-delay: .15s; }
.delay-4 { animation-delay: .2s; }

@keyframes pulse-glow {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}
.animate-glow { animation: pulse-glow 2.4s ease-in-out infinite; }

/* Signature canvas */
.signature-canvas {
  touch-action: none;
  background: #fff;
  border-radius: .75rem;
}

@media print {
  body { background: #fff !important; }
}