/* =====================================================================
 *  BRESLEV DESIGN TOKENS  —  single source of truth  (Stage 01)
 * ---------------------------------------------------------------------
 *  This file ONLY defines CSS custom properties (:root) and a small set
 *  of OPT-IN utility classes namespaced `.bt-*`. It intentionally does
 *  NOT style any existing element or class, so adding it changes ZERO
 *  pixels on the live site. Later stages consume these tokens to unify
 *  the theme component-by-component.
 *
 *  Canonical values were reverse-engineered from the current theme
 *  (the "modern tier": synagogues / lessons / uman-services).
 * ===================================================================== */

:root {
  /* ---- Brand (the one true "Breslev orange") ---- */
  --bt-brand:          #f37021;   /* replaces #ef521d #e8872a #e67e22 #f39c12 #ff9800 ... */
  --bt-brand-deep:     #d9541a;   /* hover / active */
  --bt-brand-soft:     #fdeee3;   /* tint backgrounds */

  /* ---- Blue (heroes, headings, deep UI) ---- */
  --bt-blue:           #005a8c;
  --bt-blue-mid:       #004266;
  --bt-blue-deep:      #00334e;
  --bt-blue-soft:      #e6f0f7;

  /* ---- Ink & neutrals (slightly blue-biased, not pure grey) ---- */
  --bt-ink:            #12283a;   /* primary text */
  --bt-ink-2:         #33475a;   /* secondary text */
  --bt-muted:          #64748b;   /* captions / meta */
  --bt-line:           #e6e6e6;   /* borders */
  --bt-line-2:        #d9d9d9;

  /* ---- Surfaces ---- */
  --bt-bg:             #ffffff;
  --bt-surface:        #f9f9f9;   /* the theme's most-used panel bg (×75) */
  --bt-surface-2:      #f3f4f6;

  /* ---- Semantic (state) — separate from the brand accent ---- */
  --bt-success:        #10b981;
  --bt-success-soft:   #e6fdf0;
  --bt-danger:         #ef4444;
  --bt-danger-soft:    #fbe4e0;
  --bt-warning:        #d97706;
  --bt-warning-soft:   #fef3c7;
  --bt-info:           var(--bt-blue);

  /* ---- Gradients (the copy-pasted hero, defined once) ---- */
  --bt-grad-hero:      linear-gradient(135deg, var(--bt-blue) 0%, var(--bt-blue-deep) 100%);
  --bt-grad-brand:     linear-gradient(135deg, #f6873f 0%, var(--bt-brand) 55%, var(--bt-brand-deep) 100%);

  /* ---- Typography ---- */
  /* Keep the site's existing Hebrew font — unify, don't introduce a new face. */
  --bt-font-base:      "almoni-tzar", "Segoe UI", system-ui, Arial, sans-serif;
  --bt-font-heading:   "almoni-tzar", "Segoe UI", system-ui, Arial, sans-serif;
  --bt-font-mono:      ui-monospace, "SF Mono", Consolas, monospace;

  /* Type scale (~1.2 modular). rem-based, root assumed 16px. */
  --bt-fs-xs:   0.75rem;   /* 12 */
  --bt-fs-sm:   0.8125rem; /* 13 */
  --bt-fs-base: 0.9375rem; /* 15 */
  --bt-fs-md:   1rem;      /* 16 */
  --bt-fs-lg:   1.125rem;  /* 18 */
  --bt-fs-xl:   1.375rem;  /* 22 */
  --bt-fs-2xl:  1.75rem;   /* 28 */
  --bt-fs-3xl:  2.125rem;  /* 34 */
  --bt-fs-hero: clamp(1.9rem, 5vw, 3rem);

  --bt-fw-normal: 400;
  --bt-fw-medium: 600;
  --bt-fw-bold:   700;
  --bt-fw-black:  800;
  --bt-lh-tight:  1.2;
  --bt-lh-base:   1.65;

  /* ---- Spacing scale (4px base) ---- */
  --bt-space-1:  0.25rem;  /* 4  */
  --bt-space-2:  0.5rem;   /* 8  */
  --bt-space-3:  0.75rem;  /* 12 */
  --bt-space-4:  1rem;     /* 16 */
  --bt-space-5:  1.5rem;   /* 24 */
  --bt-space-6:  2rem;     /* 32 */
  --bt-space-8:  3rem;     /* 48 */
  --bt-space-10: 4rem;     /* 64 */

  /* ---- Radius / shadow / layout ---- */
  --bt-radius-sm:  8px;
  --bt-radius-md:  12px;
  --bt-radius-lg:  16px;
  --bt-radius-pill: 999px;
  --bt-shadow-sm:  0 1px 2px rgba(18,40,58,.06);
  --bt-shadow-md:  0 4px 16px rgba(18,40,58,.08);
  --bt-shadow-lg:  0 12px 34px rgba(18,40,58,.12);
  --bt-container:  1170px;          /* matches Bootstrap-3 container */
  --bt-transition: .2s ease;
}

/* =====================================================================
 *  OPT-IN utilities (namespaced `.bt-*`) — used only by markup that
 *  explicitly asks for them. Nothing in the current theme uses these
 *  class names, so they cannot affect existing pages.
 * ===================================================================== */

.bt-container { max-width: var(--bt-container); margin-inline: auto; padding-inline: var(--bt-space-4); }

.bt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bt-space-2);
  font-family: var(--bt-font-base); font-size: var(--bt-fs-base); font-weight: var(--bt-fw-bold);
  padding: 10px 20px; border-radius: var(--bt-radius-sm); border: 0; cursor: pointer;
  background: var(--bt-brand); color: #fff; text-decoration: none;
  transition: background var(--bt-transition), transform var(--bt-transition);
}
.bt-btn:hover { background: var(--bt-brand-deep); }
.bt-btn:active { transform: translateY(1px); }
.bt-btn:focus-visible { outline: 3px solid var(--bt-brand-soft); outline-offset: 2px; }
.bt-btn--ghost { background: transparent; color: var(--bt-brand-deep); box-shadow: inset 0 0 0 1.5px var(--bt-line-2); }
.bt-btn--ghost:hover { background: var(--bt-surface); }
.bt-btn--blue { background: var(--bt-blue); }
.bt-btn--blue:hover { background: var(--bt-blue-deep); }

.bt-card {
  background: var(--bt-bg); border: 1px solid var(--bt-line); border-radius: var(--bt-radius-md);
  box-shadow: var(--bt-shadow-sm); overflow: hidden; transition: box-shadow var(--bt-transition), transform var(--bt-transition);
}
.bt-card:hover { box-shadow: var(--bt-shadow-md); transform: translateY(-2px); }

.bt-hero {
  background: var(--bt-grad-hero); color: #fff;
  padding: var(--bt-space-8) var(--bt-space-5);
  border-radius: var(--bt-radius-lg);
}
.bt-hero h1, .bt-hero h2 { font-family: var(--bt-font-heading); font-weight: var(--bt-fw-black); line-height: var(--bt-lh-tight); margin: 0; }

.bt-chip {
  display: inline-block; font-size: var(--bt-fs-xs); font-weight: var(--bt-fw-bold);
  padding: 3px 10px; border-radius: var(--bt-radius-pill);
  background: var(--bt-brand); color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .bt-card, .bt-btn { transition: none; }
  .bt-card:hover, .bt-btn:active { transform: none; }
}