/* Webraan design tokens — single source of truth for every template. */
:root {
  --wr-primary: #0a63f7;
  --wr-primary-dark: #071a4b;
  --wr-navy: #071a4b;
  --wr-navy-deep: #041033;
  --wr-blue: #0a63f7;
  --wr-blue-electric: #1769ff;
  --wr-blue-soft: #ddebff;
  --wr-blue-ice: #eef6ff;
  --wr-bg: #f7faff;
  --wr-surface: #ffffff;
  --wr-white: #ffffff;
  --wr-text: #10234f;
  --wr-text-muted: #66738b;
  --wr-border: #dce7f6;
  --wr-success: #18a374;
  --wr-success-soft: #7dffc2;
  --wr-warning: #e5a51e;
  --wr-error: #d94a62;
  --wr-discount: #ef4455;
  --wr-blue-highlight: #83b5ff;

  --wr-grad-hero: linear-gradient(165deg, #041033 0%, #071a4b 28%, #1769ff 62%, #ddebff 86%, #ffffff 100%);
  --wr-grad-repair: linear-gradient(135deg, #041033 0%, #0a2a7a 42%, #1769ff 100%);
  --wr-grad-apple: linear-gradient(160deg, #eef6ff 0%, #ffffff 48%, #ddebff 100%);
  --wr-grad-promo: linear-gradient(135deg, #c9dbff 0%, #eef6ff 48%, #ffffff 100%);
  --wr-grad-newsletter: linear-gradient(135deg, #1769ff 0%, #0a63f7 48%, #071a4b 100%);
  --wr-grad-btn: linear-gradient(135deg, #1769ff, #0a63f7);

  --wr-type-display: 2.75rem;
  --wr-type-h1: 2.25rem;
  --wr-type-h2: 1.75rem;
  --wr-type-h3: 1.35rem;
  --wr-type-h4: 1.1rem;
  --wr-type-body-lg: 1.05rem;
  --wr-type-body: 0.95rem;
  --wr-type-body-sm: 0.85rem;
  --wr-type-caption: 0.75rem;
  --wr-type-button: 0.875rem;
  --wr-type-label: 0.8rem;
  --wr-type-meta: 0.78rem;

  --wr-font: "WebraanYekanBakh", "YekanBakh", Tahoma, sans-serif;
  --wr-display: "WebraanMorabba", "Morabba", "WebraanYekanBakh", "YekanBakh", Tahoma, sans-serif;

  --wr-glow: 0 0 60px rgba(23, 105, 255, 0.35);
  --wr-container: 1200px;
  --wr-gutter: 24px;
  --wr-header-h: 78px;
  --wr-announce-max: 720px;
  --wr-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wr-transition: 0.25s var(--wr-ease);

  --wr-radius-sm: 12px;
  --wr-radius: 20px;
  --wr-radius-lg: 28px;
  --wr-radius-xl: 32px;
  --wr-radius-pill: 999px;
  --wr-shadow-xs: 0 2px 8px rgba(7, 26, 75, 0.04);
  --wr-shadow-sm: 0 8px 24px rgba(7, 26, 75, 0.06);
  --wr-shadow-md: 0 16px 40px rgba(7, 26, 75, 0.08);
  --wr-shadow-lg: 0 24px 60px rgba(10, 99, 247, 0.12);
}