/* =============================================================================
   Simha Luxury Wheels — Design tokens (Step 1)
   Direction: “Midnight Chauffeur” — see docs/DESIGN-UPGRADE.md
   ============================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Sora:wght@400;500;600;700&display=swap");

:root {
  /* Color */
  --slw-ink: #0e0e10;
  --slw-ink-soft: #1a1a1d;
  --slw-paper: #f6f5f2;
  --slw-paper-elevated: #ffffff;
  --slw-line: #e4e2dc;
  --slw-muted: #6b6b70;
  --slw-accent: #b8953e;
  --slw-accent-deep: #8c6f24;
  --slw-whatsapp: #1faf5a;
  --slw-focus: #2f6fed;
  --slw-on-accent: #0e0e10;
  --slw-on-ink: #f6f5f2;

  /* Compat with older SLW rules that used --primary-color */
  --primary-color: var(--slw-accent);

  /* Type */
  --slw-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --slw-font-body: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;

  --slw-text-brand: clamp(1.25rem, 2.2vw, 1.75rem);
  --slw-text-h1: clamp(2.5rem, 5vw, 4rem);
  --slw-text-h2: clamp(1.75rem, 3vw, 2.5rem);
  --slw-text-h3: clamp(1.15rem, 1.5vw, 1.35rem);
  --slw-text-body: 1rem;
  --slw-text-small: 0.875rem;

  /* Space (8px system) */
  --slw-space-1: 0.25rem;
  --slw-space-2: 0.5rem;
  --slw-space-3: 0.75rem;
  --slw-space-4: 1rem;
  --slw-space-5: 1.5rem;
  --slw-space-6: 2rem;
  --slw-space-7: 3rem;
  --slw-space-8: 4rem;
  --slw-space-9: 6rem;

  --slw-section-y: clamp(3rem, 6vw, 6rem);
  --slw-content-max: 75rem;
  --slw-radius: 0.5rem;
  --slw-radius-sm: 0.375rem;

  --slw-nav-height: 4.5rem;
  --slw-shadow-soft: 0 12px 40px rgba(14, 14, 16, 0.08);
  --slw-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="dark"] {
  --slw-ink: #f3efe6;
  --slw-ink-soft: #1c1b18;
  --slw-paper: #0e0e10;
  --slw-paper-elevated: #171512;
  --slw-line: #2c2923;
  --slw-muted: #a39b8c;
  --slw-accent: #d4b45a;
  --slw-accent-deep: #e0c878;
  --slw-on-accent: #0e0e10;
  --slw-on-ink: #0e0e10;
  --slw-shadow-soft: 0 12px 40px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

[data-theme="light"] {
  color-scheme: light;
}

/* Base document — Step 1 foundation */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: var(--slw-font-body);
  font-size: var(--slw-text-body);
  line-height: 1.65;
  color: var(--slw-ink);
  background: var(--slw-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .slw-h1, .slw-home-heading,
.slw-services-v2__title, .slw-cars__title {
  font-family: var(--slw-font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--slw-ink);
}

/* Hero brand lockup uses display; hero H1 stays body weight (see site-pages.css) */
.slw-home-hero__name {
  font-family: var(--slw-font-display);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--slw-focus);
  outline-offset: 3px;
}

/* Utility: content width */
.slw-wrap {
  width: min(100% - 2rem, var(--slw-content-max));
  margin-inline: auto;
}