:root {
  /* ===== Brand — جگری (maroon) ===== */
  --brand:          rgba(190, 34, 46, 1);      /* #BE222E */
  --brand-600:      #a81d28;
  --brand-700:      #8f1821;
  --brand-050:      #fbeceD;                    /* tint for backgrounds */
  --brand-contrast: #ffffff;

  /* ===== Accent (secondary CTA / badges) ===== */
  --accent:         #f2810c;                    /* warm amber, used sparingly */
  --accent-050:     #fff3e4;

  /* ===== Neutral surfaces (LIGHT theme) ===== */
  --bg:             #ffffff;
  --surface:        #f6f7f9;                    /* card / panel fill */
  --surface-2:      #eef1f4;
  --line:           #e2e6ea;                    /* borders */
  --line-strong:    #cdd4da;

  /* ===== Header (deep neutral, like AutoDoc dark bar but on-brand) ===== */
  --header-bg:      #17181c;
  --header-bg-2:    #202228;
  --header-fg:      #ffffff;
  --header-muted:   #a9b0b8;

  /* ===== Text ===== */
  --ink:            #14181d;                    /* headings */
  --ink-2:          #3c4650;                    /* body */
  --ink-muted:      #6b7681;                    /* secondary */

  /* ===== Feedback ===== */
  --ok:             #1f9d55;
  --warn:           #d9822b;
  --err:            #d13438;

  /* ===== Radius / shadow / spacing ===== */
  --r-sm: 6px;
  --r:    10px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* Card fill + muted text aliases (used by blog/single-post components) */
  --card:             #ffffff;
  --muted-foreground: #6b7681;

  --shadow-sm: 0 1px 2px rgba(20,24,29,.06), 0 1px 3px rgba(20,24,29,.08);
  --shadow:    0 4px 12px rgba(20,24,29,.08);
  --shadow-lg: 0 12px 32px rgba(20,24,29,.12);
  --shadow-brand: 0 8px 24px rgba(190,34,46,.18);

  --container: 1280px;
  --gap: 24px;

  /* ===== Type ===== */
  --font: "Vazirmatn", -apple-system, "Segoe UI", Tahoma, sans-serif;
  --fs-hero: clamp(1.8rem, 3vw, 2.6rem);
  --fs-h2:   clamp(1.4rem, 2.2vw, 1.9rem);
  --fs-body: 1rem;
  --fs-sm:   .875rem;
}