/* Kaizenova Car Booking Pro — Canonical Design Tokens */
:root {
  --kcbp-ds-font-family: "Tajawal", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --kcbp-ds-font-size-xs: 12px;
  --kcbp-ds-font-size-sm: 13px;
  --kcbp-ds-font-size-md: 14px;
  --kcbp-ds-font-size-lg: 16px;
  --kcbp-ds-font-size-xl: 20px;
  --kcbp-ds-font-weight-regular: 400;
  --kcbp-ds-font-weight-medium: 500;
  --kcbp-ds-font-weight-semibold: 600;
  --kcbp-ds-font-weight-bold: 700;
  --kcbp-ds-space-1: 4px;
  --kcbp-ds-space-2: 8px;
  --kcbp-ds-space-3: 12px;
  --kcbp-ds-space-4: 16px;
  --kcbp-ds-space-5: 20px;
  --kcbp-ds-space-6: 24px;
  --kcbp-ds-space-8: 32px;
  --kcbp-ds-space-10: 40px;
  --kcbp-ds-space-12: 48px;
  --kcbp-ds-space-16: 64px;
  --kcbp-ds-radius-sm: 8px;
  --kcbp-ds-radius-md: 12px;
  --kcbp-ds-radius-lg: 18px;
  --kcbp-ds-radius-xl: 24px;
  --kcbp-ds-radius-pill: 999px;
  --kcbp-ds-color-primary: #078fb5;
  --kcbp-ds-color-primary-strong: #056f8d;
  --kcbp-ds-color-secondary: #4f46e5;
  --kcbp-ds-color-bg: #f6f8fc;
  --kcbp-ds-color-surface: #ffffff;
  --kcbp-ds-color-surface-soft: #f8fafc;
  --kcbp-ds-color-text: #162033;
  --kcbp-ds-color-muted: #718096;
  --kcbp-ds-color-border: #e5eaf2;
  --kcbp-ds-color-border-strong: #cbd5e1;
  --kcbp-ds-color-success: #159a72;
  --kcbp-ds-color-warning: #c98218;
  --kcbp-ds-color-danger: #d9485f;
  --kcbp-ds-color-info: #2563eb;
  --kcbp-ds-on-primary: #ffffff;
  --kcbp-ds-shadow-sm: 0 1px 3px rgba(20, 35, 70, .08);
  --kcbp-ds-shadow-md: 0 8px 24px rgba(20, 35, 70, .09);
  --kcbp-ds-shadow-lg: 0 16px 42px rgba(20, 35, 70, .12);
  --kcbp-ds-focus-ring: 0 0 0 3px rgba(7, 143, 181, .18);
  --kcbp-ds-transition: 180ms ease;

  /* Compatibility aliases: legacy CSS reads these, but the values have one source. */
  --kcbp-primary: var(--kcbp-ds-color-primary);
  --kcbp-primary-hover: var(--kcbp-ds-color-primary-strong);
  --kcbp-secondary: var(--kcbp-ds-color-secondary);
  --kcbp-bg: var(--kcbp-ds-color-bg);
  --kcbp-bg-card: var(--kcbp-ds-color-surface);
  --kcbp-text: var(--kcbp-ds-color-text);
  --kcbp-text-muted: var(--kcbp-ds-color-muted);
  --kcbp-border: var(--kcbp-ds-color-border);
  --ks-primary: var(--kcbp-ds-color-primary);
  --ks-primary-strong: var(--kcbp-ds-color-primary-strong);
  --ks-ink: var(--kcbp-ds-color-text);
  --ks-muted: var(--kcbp-ds-color-muted);
  --ks-soft: var(--kcbp-ds-color-bg);
  --ks-surface: var(--kcbp-ds-color-surface);
  --ks-line: var(--kcbp-ds-color-border);
  --ks-success: var(--kcbp-ds-color-success);
  --ks-warning: var(--kcbp-ds-color-warning);
  --ks-danger: var(--kcbp-ds-color-danger);
  --ks-radius: var(--kcbp-ds-radius-lg);
  --ks-shadow: var(--kcbp-ds-shadow-md);
  --auth-primary: var(--kcbp-ds-color-primary);
  --auth-bg: var(--kcbp-ds-color-bg);
  --auth-surface: var(--kcbp-ds-color-surface);
  --auth-text: var(--kcbp-ds-color-text);
  --auth-muted: var(--kcbp-ds-color-muted);
  --auth-border: var(--kcbp-ds-color-border);
}

.kcbp-component:focus-visible,
.kcbp-btn:focus-visible,
.kcbp-form-control:focus-visible,
.kcbp-verification-method:focus-visible,
.kcbp-payment-option:focus-visible {
  outline: none;
  box-shadow: var(--kcbp-ds-focus-ring);
}