/* =========================================================
   Riyadh Car Services — BASE
   Tokens, reset, typography, utilities
   ========================================================= */
:root {
  /* Palette — onyx / ivory / champagne gold / deep maroon */
  --onyx: #0d0c0b;
  --onyx-2: #151311;
  --charcoal: #1d1a17;
  --charcoal-2: #27231f;
  --ivory: #f6f2eb;
  --pearl: #ece6dc;
  --sand: #ddd3c3;
  --white: #ffffff;
  --gold: #c6a15b;
  --gold-light: #e7cd96;
  --gold-deep: #9a7636;
  --maroon: #5c1824;
  --maroon-deep: #360c14;
  --text: #1b1916;
  --text-soft: #5f574c;
  --text-light: rgba(246, 242, 235, 0.92);
  --text-light-soft: rgba(246, 242, 235, 0.62);

  --grad-gold: linear-gradient(135deg, #f1dcab 0%, #c6a15b 45%, #9a7636 100%);
  --grad-gold-h: linear-gradient(90deg, #9a7636, #e7cd96, #9a7636);
  --grad-maroon: linear-gradient(160deg, #7a2232 0%, #5c1824 45%, #2a0910 100%);

  /* Type */
  --font: "Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-semi: 600;
  --fw-bold: 700;
  --fw-black: 900;

  /* Layout */
  --container: 1240px;
  --gutter: clamp(1.1rem, 3vw, 2rem);
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --header-h: 84px;

  /* Motion */
  --ease: cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 250ms;
  --t: 350ms;
  --t-slow: 400ms;

  /* Shadows */
  --shadow-sm: 0 4px 14px rgba(20, 16, 10, 0.06);
  --shadow: 0 18px 50px -18px rgba(20, 16, 10, 0.28);
  --shadow-lg: 0 40px 80px -30px rgba(20, 16, 10, 0.45);
  --glow-gold: 0 0 0 1px rgba(198, 161, 91, 0.35), 0 20px 50px -12px rgba(198, 161, 91, 0.45);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: auto; /* Lenis handles smoothing */
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--font);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.8;
  color: var(--text);
  background: var(--ivory);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.is-loading { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { line-height: 1.25; font-weight: var(--fw-bold); }
::selection { background: var(--gold); color: var(--onyx); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ic {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* RTL arrow: the base arrow points LEFT (= forward in RTL) */
[dir="ltr"] .ic-flip { transform: scaleX(-1); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
}

.gold {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--onyx); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--gold-deep), var(--gold)); border-radius: 10px; border: 2px solid var(--onyx); }
html { scrollbar-color: var(--gold-deep) var(--onyx); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}