/* ═══════════════════════════════════════════════════════════════════
   SCHOOLRADAR — DESIGN TOKENS (theme.css)
   Semantic layer on top of styles.css
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Primary: Глибокий синій (довіра) ──────────────────────────── */
  --primary:       #1a3fa8;
  --primary-dk:    #122d8a;
  --primary-lt:    #eaeffc;
  --primary-mid:   #c8d6f8;

  /* ── Accent: Теплий золотий (рейтинг, CTA, зірки) ──────────────── */
  --accent:        #f5a623;
  --accent-dk:     #d48800;
  --accent-lt:     #fff8e6;
  --accent-star:   #f5a623;

  /* ── Backgrounds ────────────────────────────────────────────────── */
  --bg-soft:       #f1f5fb;
  --bg-card:       #ffffff;

  /* ── Radius tokens ──────────────────────────────────────────────── */
  --radius-block:  12px;
  --radius-btn:    8px;
  --radius-sm:     6px;
  --radius-pill:   999px;

  /* ── Typography ─────────────────────────────────────────────────── */
  --font-main:     'Onest', system-ui, sans-serif;
  --fw-accent:     700;
  --fw-heavy:      800;

  /* ── Bottom Navigation ──────────────────────────────────────────── */
  --bottom-nav-h:       60px;
  --bottom-nav-bg:      #ffffff;
  --bottom-nav-border:  rgba(26, 63, 168, 0.10);
  --bottom-nav-active:  var(--primary);
  --bottom-nav-muted:   #8fa0b2;

  /* ── Search Suggest Dropdown ────────────────────────────────────── */
  --suggest-bg:     #ffffff;
  --suggest-hover:  var(--bg-soft);
  --suggest-border: #dce4ef;
  --suggest-shadow: 0 8px 28px rgba(26, 63, 168, 0.14);

  /* ── Bottom Sheet (mobile) ──────────────────────────────────────── */
  --sheet-bg:      #ffffff;
  --sheet-radius:  20px 20px 0 0;
  --sheet-shadow:  0 -8px 32px rgba(26, 63, 168, 0.14);

  /* ── Tutor Card ─────────────────────────────────────────────────── */
  --tutor-subject-bg:    var(--accent-lt);
  --tutor-subject-color: var(--accent-dk);
  --tutor-avatar-size:   72px;

  /* ── Shadows (extended) ─────────────────────────────────────────── */
  --shadow-sm:   0 1px 4px rgba(26, 63, 168, 0.08);
  --shadow-md:   0 4px 16px rgba(26, 63, 168, 0.12);
  --shadow-lg:   0 8px 32px rgba(26, 63, 168, 0.16);
  --shadow-card: 0 2px 12px rgba(26, 63, 168, 0.09);

  /* ── Override core variables ────────────────────────────────────── */
  --blue:       var(--primary);
  --blue-dk:    var(--primary-dk);
  --blue-lt:    var(--primary-lt);
  --canvas:     var(--bg-soft);
  --r1:         var(--radius-sm);
  --r2:         var(--radius-btn);
  --r3:         var(--radius-block);
}

/* ── Global font enforcement ─────────────────────────────────────── */
*, *::before, *::after {
  font-family: var(--font-main);
}

/* ── Heading hierarchy ───────────────────────────────────────────── */
h1 { font-weight: var(--fw-heavy); }
h2 { font-weight: var(--fw-accent); }
h3 { font-weight: var(--fw-accent); }

/* ── Accent button variant ───────────────────────────────────────── */
.btn-accent {
  background: var(--accent);
  color: #1a1a1a;
  border-radius: var(--radius-btn);
  font-weight: var(--fw-accent);
  border: none;
}
.btn-accent:hover {
  background: var(--accent-dk);
  color: #fff;
}

/* ── Primary button overrides ────────────────────────────────────── */
.btn-primary {
  background: var(--primary);
  border-radius: var(--radius-btn);
}
.btn-primary:hover {
  background: var(--primary-dk);
}

/* ── Rating star color ───────────────────────────────────────────── */
.rating-chip,
.icard-score-tag,
.featured-card-badge,
.tutor-rating-badge,
.review-bubble-rating {
  background: var(--accent-lt);
  color: var(--accent-dk);
}