/* ============================================================
   RENT CAR — Design Tokens
   Luxury automotive aesthetic: deep ink + ember orange + cream
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&family=Vazirmatn:wght@300;400;500;600;700&display=swap');

:root {
  /* ---------- COLORS ---------- */
  /* Ink / neutrals */
  --ink-950: #08080A;
  --ink-900: #0E0E11;
  --ink-800: #17171B;
  --ink-700: #222227;
  --ink-600: #2E2E35;
  --ink-500: #4A4A52;
  --ink-400: #6B6B73;
  --ink-300: #9C9CA3;
  --ink-200: #C8C8CE;
  --ink-100: #E6E5E0;
  --ink-50:  #F2F0EB;

  /* Cream / paper */
  --cream-50:  #FBF9F4;
  --cream-100: #F5F1EA;
  --cream-200: #ECE6DB;
  --cream-300: #DDD5C5;

  /* Ember — primary brand */
  --ember-50:  #FFF2EB;
  --ember-100: #FFDFCD;
  --ember-200: #FFB995;
  --ember-300: #FF8E58;
  --ember-400: #FF6A2D;
  --ember-500: #F44E10;  /* primary */
  --ember-600: #D63B05;
  --ember-700: #A82C03;
  --ember-800: #7A2106;

  /* Brass / copper accent */
  --brass-300: #DDB37A;
  --brass-400: #C9A06A;
  --brass-500: #B27D45;
  --brass-600: #8A5C2E;

  /* Status */
  --success: #2E8B57;
  --success-bg: #DCEFE3;
  --warning: #C98B11;
  --warning-bg: #FBEFCC;
  --danger: #C8331F;
  --danger-bg: #F8D9D2;
  --info: #2A5DB8;
  --info-bg: #D6E2F4;

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: 'Instrument Serif', 'Vazirmatn', Georgia, serif;
  --font-sans: 'Geist', 'Vazirmatn', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', 'SF Mono', Menlo, monospace;
  --font-fa: 'Vazirmatn', 'Geist', system-ui, sans-serif;

  /* Scale */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-base: 15px;
  --text-md:  16px;
  --text-lg:  18px;
  --text-xl:  22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 48px;
  --text-5xl: 64px;
  --text-6xl: 88px;
  --text-7xl: 128px;

  /* ---------- SPACING ---------- */
  --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;

  /* ---------- RADIUS ---------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---------- ELEVATION ---------- */
  --shadow-xs: 0 1px 2px rgba(8,8,10,.06);
  --shadow-sm: 0 1px 3px rgba(8,8,10,.08), 0 1px 2px rgba(8,8,10,.04);
  --shadow-md: 0 4px 12px rgba(8,8,10,.10), 0 2px 4px rgba(8,8,10,.06);
  --shadow-lg: 0 12px 32px rgba(8,8,10,.14), 0 4px 8px rgba(8,8,10,.06);
  --shadow-ember: 0 12px 32px rgba(244,78,16,.35);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--ink-900);
  background: var(--cream-50);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[dir="rtl"] body, body[dir="rtl"] {
  font-family: var(--font-fa);
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }

.display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; }
.mono { font-family: var(--font-mono); letter-spacing: 0; }

/* utility selection */
::selection { background: var(--ember-500); color: white; }

/* ============================================================
   PRIMITIVES (buttons / chips / cards)
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  font-weight: 500;
  font-size: var(--text-base);
  border: 1px solid transparent;
  transition: all var(--dur-base) var(--ease-out);
  cursor: pointer; white-space: nowrap;
  letter-spacing: 0.01em;
}
.btn-primary {
  background: var(--ember-500); color: white;
}
.btn-primary:hover { background: var(--ember-600); box-shadow: var(--shadow-ember); transform: translateY(-1px); }
.btn-ink {
  background: var(--ink-900); color: var(--cream-50);
}
.btn-ink:hover { background: var(--ink-700); }
.btn-ghost {
  background: transparent; color: var(--ink-900); border-color: var(--ink-200);
}
.btn-ghost:hover { border-color: var(--ink-900); }
.btn-ghost-light {
  background: transparent; color: var(--cream-50); border-color: rgba(255,255,255,.2);
}
.btn-ghost-light:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.06); }
.btn-sm { padding: 8px 14px; font-size: var(--text-sm); }
.btn-lg { padding: 16px 28px; font-size: var(--text-md); }
.btn-icon { width: 40px; height: 40px; padding: 0; border-radius: 50%; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--r-pill);
  font-size: var(--text-xs); font-weight: 500;
  background: var(--ink-50); color: var(--ink-700);
  border: 1px solid var(--ink-100);
}
.chip-ember { background: var(--ember-50); color: var(--ember-700); border-color: var(--ember-100); }
.chip-success { background: var(--success-bg); color: var(--success); border-color: transparent; }
.chip-warning { background: var(--warning-bg); color: var(--warning); border-color: transparent; }
.chip-danger { background: var(--danger-bg); color: var(--danger); border-color: transparent; }
.chip-info { background: var(--info-bg); color: var(--info); border-color: transparent; }
.chip-dark { background: var(--ink-900); color: var(--cream-50); border-color: var(--ink-700); }

.card {
  background: white;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.card-dark { background: var(--ink-900); color: var(--cream-50); border-color: var(--ink-700); }

.divider { height: 1px; background: var(--ink-100); border: none; margin: 0; }
.divider-dark { height: 1px; background: var(--ink-700); border: none; margin: 0; }

/* Inputs */
.input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  font: inherit;
  font-size: var(--text-base);
  background: white;
  color: var(--ink-900);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.input:focus { outline: none; border-color: var(--ember-500); box-shadow: 0 0 0 3px rgba(244,78,16,.15); }
.input::placeholder { color: var(--ink-400); }
.label { display: block; font-size: var(--text-xs); font-weight: 500; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }

/* Tiny utility */
.eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.16em; color: var(--ember-600); }
.eyebrow-light { color: var(--ember-300); }

/* Sidebar styling commonly reused */
.sidebar { width: 260px; background: var(--ink-900); color: var(--cream-100); display: flex; flex-direction: column; min-height: 100vh; }
.sidebar-brand { padding: 24px 24px 32px; }
.sidebar-section-title { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-400); padding: 0 24px; margin: 24px 0 8px; }
.sidebar-link { display: flex; align-items: center; gap: 12px; padding: 10px 24px; color: var(--ink-200); font-size: var(--text-sm); transition: color var(--dur-fast), background var(--dur-fast); border-left: 2px solid transparent; }
.sidebar-link:hover { color: white; background: var(--ink-800); }
.sidebar-link.active { color: white; background: var(--ink-800); border-left-color: var(--ember-500); }
[dir="rtl"] .sidebar-link { border-left: none; border-right: 2px solid transparent; }
[dir="rtl"] .sidebar-link.active { border-right-color: var(--ember-500); }

/* Topbar */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 32px; border-bottom: 1px solid var(--ink-100); background: white; }

/* Hide scrollbar utility */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* Container */
.container { max-width: 1440px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); }

@media (max-width: 768px) {
  .topbar { padding: 12px 16px; flex-wrap: wrap; gap: 10px; }
}