/* =============================================================
   DESIGN SYSTEM — Original visual identity (purple/indigo, RTL)
   Prefix: --bk-*   |   No third-party class names or values.
   ============================================================= */
:root {
  /* ---- Brand: primary (indigo / violet) ---- */
  --bk-primary-50:  #f1effe;
  --bk-primary-100: #e4e0fd;
  --bk-primary-200: #c9c1fb;
  --bk-primary-300: #a99cf8;
  --bk-primary-400: #8470f4;
  --bk-primary-500: #5b3df5;   /* core brand */
  --bk-primary-600: #4a2ee0;   /* hover */
  --bk-primary-700: #3c25b8;
  --bk-primary-800: #2f1d8f;
  --bk-primary-900: #241670;
  --bk-primary: var(--bk-primary-500);
  --bk-primary-hover: var(--bk-primary-600);
  --bk-primary-tint: var(--bk-primary-50);     /* soft fill bg */
  --bk-primary-soft: var(--bk-primary-100);
  --bk-on-primary: #ffffff;

  /* ---- Ink (near-black CTA + headings) ---- */
  --bk-ink: #15131f;        /* primary dark button / headings */
  --bk-ink-hover: #2a2733;
  --bk-on-ink: #ffffff;

  /* ---- Neutrals ---- */
  --bk-text: #1c1a26;       /* body text */
  --bk-text-muted: #6b6776; /* secondary text */
  --bk-text-faint: #9a96a6; /* tertiary / placeholders */
  --bk-bg: #ffffff;         /* page background */
  --bk-surface: #faf9fd;    /* faded panel background */
  --bk-surface-2: #f3f1f9;  /* elevated/alt surface */
  --bk-hover: #f1eff8;      /* hover wash */
  --bk-border: #e7e5ee;     /* default border */
  --bk-border-strong: #d4d1de;
  --bk-overlay: rgba(21, 19, 31, 0.55); /* modal scrim */

  /* ---- Semantic ---- */
  --bk-success: #15a55b;
  --bk-success-tint: #e4f6ec;
  --bk-error: #e5484d;
  --bk-error-tint: #fdecec;
  --bk-warning: #f5a524;
  --bk-warning-tint: #fdf1dc;
  --bk-info: var(--bk-primary-500);

  /* ---- Rating star ---- */
  --bk-star: #f5a524;

  /* ---- Gradients ---- */
  --bk-gradient-brand: linear-gradient(135deg, #5b3df5 0%, #8470f4 45%, #c78bf0 100%);
  --bk-gradient-soft:  linear-gradient(135deg, #f1effe 0%, #faf3fb 100%);

  /* ---- Spacing scale (8px base, +4px step) ---- */
  --bk-space-1: 4px;
  --bk-space-2: 8px;
  --bk-space-3: 12px;
  --bk-space-4: 16px;
  --bk-space-5: 20px;
  --bk-space-6: 24px;
  --bk-space-8: 32px;
  --bk-space-10: 40px;
  --bk-space-12: 48px;
  --bk-space-16: 64px;
  --bk-space-20: 80px;
  --bk-space-24: 96px;

  /* ---- Typography ---- */
  --bk-font: 'Vazirmatn', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bk-font-display: 'Vazirmatn', 'Inter', system-ui, sans-serif;

  --bk-fs-display: 48px;  /* h1 hero */
  --bk-fs-h1: 40px;
  --bk-fs-h2: 32px;
  --bk-fs-h3: 24px;
  --bk-fs-h4: 20px;
  --bk-fs-lg: 18px;
  --bk-fs-body: 16px;
  --bk-fs-sm: 14px;
  --bk-fs-xs: 12px;

  --bk-lh-tight: 1.15;
  --bk-lh-snug: 1.3;
  --bk-lh-normal: 1.6;

  --bk-fw-regular: 400;
  --bk-fw-medium: 500;
  --bk-fw-semibold: 600;
  --bk-fw-bold: 700;
  --bk-fw-extrabold: 800;

  /* ---- Radius ---- */
  --bk-radius-xs: 6px;
  --bk-radius-sm: 8px;
  --bk-radius-input: 12px;
  --bk-radius-card: 16px;
  --bk-radius-lg: 24px;
  --bk-radius-btn: 40px;     /* pill-ish buttons */
  --bk-radius-pill: 999px;
  --bk-radius-circle: 50%;

  /* ---- Elevation (own shadow system) ---- */
  --bk-shadow-xs: 0 1px 2px rgba(21, 19, 31, 0.05);
  --bk-shadow-sm: 0 1px 2px rgba(21, 19, 31, 0.06), 0 1px 3px rgba(21, 19, 31, 0.05);
  --bk-shadow-md: 0 4px 12px rgba(21, 19, 31, 0.08), 0 2px 4px rgba(21, 19, 31, 0.04);
  --bk-shadow-lg: 0 12px 32px rgba(21, 19, 31, 0.12), 0 4px 8px rgba(21, 19, 31, 0.05);
  --bk-shadow-xl: 0 24px 56px rgba(21, 19, 31, 0.18), 0 8px 16px rgba(21, 19, 31, 0.06);
  --bk-ring: 0 0 0 4px var(--bk-primary-100);          /* focus ring */
  --bk-ring-strong: 0 0 0 4px rgba(91, 61, 245, 0.28);

  /* ---- Motion ---- */
  --bk-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --bk-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --bk-dur-fast: 0.15s;
  --bk-dur: 0.25s;
  --bk-dur-slow: 0.4s;

  /* ---- Layout ---- */
  --bk-container: 1200px;
  --bk-container-wide: 1320px;
  --bk-container-pad: 24px;
  --bk-header-h: 72px;
  --bk-z-header: 100;
  --bk-z-drawer: 200;
  --bk-z-overlay: 300;
  --bk-z-modal: 400;
  --bk-z-toast: 500;
}

@media (max-width: 768px) {
  :root {
    --bk-fs-display: 32px;
    --bk-fs-h1: 28px;
    --bk-fs-h2: 24px;
    --bk-fs-h3: 20px;
    --bk-container-pad: 16px;
    --bk-header-h: 60px;
  }
}