/* =====================================================================
   IBRA-AUTOMOBILE · shared theme  (public site + admin panel)
   Brand: deep ink black · crimson red · luxurious gold
   ===================================================================== */

:root {
  --radius: 0.75rem;

  --background: oklch(0.99 0.005 60);
  --foreground: oklch(0.18 0.015 40);
  --card: oklch(1 0 0);
  --primary: oklch(0.48 0.22 27);          /* crimson red */
  --primary-fg: oklch(0.99 0.01 80);
  --secondary: oklch(0.95 0.02 80);
  --secondary-fg: oklch(0.2 0.02 40);
  --muted: oklch(0.96 0.01 80);
  --muted-fg: oklch(0.45 0.02 50);
  --border: oklch(0.9 0.015 70);
  --input: oklch(0.92 0.01 70);
  --ring: oklch(0.48 0.22 27);
  --gold: oklch(0.72 0.15 85);
  --gold-light: oklch(0.88 0.11 88);
  --ink: oklch(0.14 0.015 40);

  --gradient-hero: linear-gradient(135deg, oklch(0.16 0.02 40) 0%, oklch(0.22 0.05 30) 55%, oklch(0.38 0.18 28) 100%);
  --gradient-gold: linear-gradient(135deg, var(--gold-light), var(--gold));
  --shadow-luxe: 0 30px 60px -30px oklch(0.14 0.02 40 / 0.4), 0 10px 20px -10px oklch(0.48 0.22 27 / 0.25);
  --shadow-card: 0 8px 30px -12px oklch(0.14 0.02 40 / 0.18);

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.01em; margin: 0; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

.container { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 1.25rem; }

/* ------------------------------ Buttons ----------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 3rem; padding-inline: 1.75rem; border-radius: 999px;
  font-weight: 600; font-size: .95rem; cursor: pointer; border: 1px solid transparent;
  transition: transform .15s ease, filter .15s ease, background .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--primary); color: var(--primary-fg); box-shadow: var(--shadow-luxe); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-gold { background-image: var(--gradient-gold); color: var(--ink); box-shadow: var(--shadow-card); }
.btn-gold:hover { filter: brightness(1.05); }
.btn-outline { background: transparent; border-color: var(--border); color: var(--foreground); }
.btn-outline:hover { background: var(--secondary); }
.btn-block { width: 100%; }

/* --------------------------- Chips / badges ------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid var(--border); background: var(--secondary);
  color: var(--secondary-fg); border-radius: 999px;
  padding: .35rem 1rem; font-size: .85rem; font-weight: 500;
}
.eyebrow {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .24em;
  color: var(--primary);
}

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