/**
 * EHN Cars Design Tokens
 *
 * Central, shared UI tokens for frontend and admin components.
 * Keep these variables stable and use component-level fallbacks when migrating
 * older CSS. Future backend design settings can safely override this layer.
 */
:root {
  --ehn-cars-color-primary: #3452ff;
  --ehn-cars-color-primary-contrast: #ffffff;
  --ehn-cars-color-ink: #050607;
  --ehn-cars-color-text: #151515;
  --ehn-cars-color-muted: #667085;
  --ehn-cars-color-background: #ffffff;
  --ehn-cars-color-surface: #f5f5f5;
  --ehn-cars-color-surface-alt: #eeeeee;
  --ehn-cars-color-border: #e5e5e5;
  --ehn-cars-color-border-strong: #d7d7d7;
  --ehn-cars-color-success: #16a34a;
  --ehn-cars-color-success-bg: #dcfce7;

  --ehn-cars-radius-xs: 6px;
  --ehn-cars-radius-sm: 10px;
  --ehn-cars-radius-md: 14px;
  --ehn-cars-radius-lg: 18px;
  --ehn-cars-radius-card: 24px;
  --ehn-cars-radius-shell: 28px;
  --ehn-cars-radius-pill: 999px;
  --ehn-cars-radius-field: 10px;
  --ehn-cars-radius-button: 10px;

  --ehn-cars-space-xs: 6px;
  --ehn-cars-space-sm: 10px;
  --ehn-cars-space-md: 16px;
  --ehn-cars-space-lg: 24px;
  --ehn-cars-space-xl: 32px;

  --ehn-cars-field-height: 54px;
  --ehn-cars-button-height: 54px;

  --ehn-cars-shadow-soft: 0 8px 20px rgba(15, 23, 42, .08);
  --ehn-cars-shadow-card: 0 14px 34px rgba(15, 23, 42, .10);
  --ehn-cars-shadow-shell: 0 18px 60px rgba(15, 23, 42, .10);
  --ehn-cars-focus-ring: 0 0 0 3px rgba(52, 82, 255, .10);

  /* Legacy aliases used by existing components. */
  --bsuc-design-primary: var(--ehn-cars-color-primary);
  --bsuc-design-ink: var(--ehn-cars-color-ink);
  --bsuc-design-text: var(--ehn-cars-color-text);
  --bsuc-design-muted: var(--ehn-cars-color-muted);
  --bsuc-design-border: var(--ehn-cars-color-border);
  --bsuc-design-border-strong: var(--ehn-cars-color-border-strong);
  --bsuc-design-radius-card: var(--ehn-cars-radius-card);
  --bsuc-design-radius-field: var(--ehn-cars-radius-field);
  --bsuc-design-radius-pill: var(--ehn-cars-radius-pill);
}

.bsuc,
.bsuc-carfinder,
.bsuc-vehicle-page,
.bsuc-vehicle,
.bsuc-admin-wrap,
.bsuc-debug-wrap {
  --bsuc-token-primary: var(--ehn-cars-color-primary, #3452ff);
  --bsuc-token-ink: var(--ehn-cars-color-ink, #050607);
  --bsuc-token-text: var(--ehn-cars-color-text, #151515);
  --bsuc-token-muted: var(--ehn-cars-color-muted, #667085);
  --bsuc-token-surface: var(--ehn-cars-color-surface, #f5f5f5);
  --bsuc-token-border: var(--ehn-cars-color-border, #e5e5e5);
  --bsuc-token-border-strong: var(--ehn-cars-color-border-strong, #d7d7d7);
  --bsuc-token-radius-field: var(--ehn-cars-radius-field, 10px);
  --bsuc-token-radius-card: var(--ehn-cars-radius-card, 24px);
  --bsuc-token-radius-pill: var(--ehn-cars-radius-pill, 999px);
  --bsuc-token-shadow-card: var(--ehn-cars-shadow-card, 0 14px 34px rgba(15, 23, 42, .10));
}