/* Dip Your Car design tokens — primitive → semantic → component. */
:root {
  /* === PRIMITIVES === */
  --ds-color-void: #08090b;
  --ds-color-slate: #0f1114;
  --ds-color-graphite: #16191d;
  --ds-color-hairline: #242830;
  --ds-color-gold: #fdb34a;
  --ds-color-gold-deep: #e09a2c;
  --ds-color-brand-red: #ed1c24;
  --ds-color-logo-orange: #fbb040;
  --ds-color-bone: #f5f3f0;
  --ds-color-ash: #b0b6bd;
  --ds-color-smoke: #7e858e;
  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;
  --ds-space-12: 3rem;
  --ds-space-section: clamp(4rem, 9vw, 8.5rem);
  --ds-radius-sm: 10px;
  --ds-radius-card: 16px;
  --ds-radius-lg: 24px;
  --ds-radius-pill: 999px;
  --ds-font-display-ar: "El Messiri", "Readex Pro", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --ds-font-body-ar: "El Messiri", "Readex Pro", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --ds-font-display-latin: "El Messiri", "Space Grotesk", system-ui, sans-serif;
  --ds-ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --ds-duration-fast: 180ms;
  --ds-duration-standard: 380ms;
  --ds-duration-slow: 700ms;
}

/* الوضع الساطع: نفس هوية Dip Your Car مع سطوح فاتحة وتباين AA للنص. */
html[data-theme="light"] {
  --ds-color-void: #f6f7f8;
  --ds-color-slate: #ffffff;
  --ds-color-graphite: #eef1f4;
  --ds-color-hairline: #d7dde4;
  --ds-color-bone: #20252b;
  --ds-color-ash: #5d6670;
  --ds-color-smoke: #737d88;
  --ds-color-background: var(--ds-color-void);
  --ds-color-surface: var(--ds-color-slate);
  --ds-color-surface-raised: var(--ds-color-graphite);
  --ds-color-foreground: var(--ds-color-bone);
  --ds-color-foreground-muted: var(--ds-color-ash);
  --ds-color-foreground-subtle: var(--ds-color-smoke);
  --ds-color-border: var(--ds-color-hairline);
}

:root {
  /* === SEMANTIC === */
  --ds-color-background: var(--ds-color-void);
  --ds-color-surface: var(--ds-color-slate);
  --ds-color-surface-raised: var(--ds-color-graphite);
  --ds-color-foreground: var(--ds-color-bone);
  --ds-color-foreground-muted: var(--ds-color-ash);
  --ds-color-foreground-subtle: var(--ds-color-smoke);
  --ds-color-primary: var(--ds-color-gold);
  --ds-color-primary-hover: var(--ds-color-gold-deep);
  --ds-color-brand-mark: var(--ds-color-brand-red);
  --ds-color-border: var(--ds-color-hairline);
  --ds-space-component: var(--ds-space-4);
  --ds-space-section-semantic: var(--ds-space-section);
}

:root {
  /* === COMPONENT === */
  --ds-button-background: var(--ds-color-primary);
  --ds-button-foreground: #17130c;
  --ds-button-hover-background: var(--ds-color-primary-hover);
  --ds-button-radius: var(--ds-radius-pill);
  --ds-button-min-height: 44px;
  --ds-card-background: var(--ds-color-surface-raised);
  --ds-card-border: var(--ds-color-border);
  --ds-card-radius: var(--ds-radius-card);
  --ds-card-padding: var(--ds-space-6);
  --ds-focus-ring: var(--ds-color-primary);
}