/* ================================================================
   TYPOGRAPHY  —  Inter font system
   Loaded via Google Fonts <link> in base.html (display=swap,
   no FOUT, no JS dependency).
   ================================================================ */

/* ── Design tokens ─────────────────────────────────────────────── */
:root {
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'SFMono-Regular', Consolas, 'Liberation Mono',
                  Menlo, monospace;

  /* Type scale (rem — base 16 px) */
  --fs-xs:   0.75rem;    /* 12 px */
  --fs-sm:   0.8125rem;  /* 13 px */
  --fs-base: 0.9375rem;  /* 15 px – comfortable reading size */
  --fs-lg:   1.0625rem;  /* 17 px */
  --fs-xl:   1.1875rem;  /* 19 px */
  --fs-2xl:  1.375rem;   /* 22 px */
  --fs-3xl:  1.625rem;   /* 26 px */
  --fs-4xl:  2rem;       /* 32 px */

  /* Line heights */
  --lh-tight:   1.25;
  --lh-snug:    1.375;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  /* Letter spacing */
  --ls-tight:   -0.02em;
  --ls-normal:   0em;
  --ls-wide:     0.02em;
  --ls-wider:    0.06em;
  --ls-widest:   0.12em;

  /* Font weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Colour palette (text) */
  --clr-text-primary:   #1c1c2e;
  --clr-text-secondary: #4a4a6a;
  --clr-text-muted:     #7a7a9a;
}

/* ── Global rendering ───────────────────────────────────────────── */
*,
*::before,
*::after {
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html {
  font-size: 16px;
}

/* ── Body ───────────────────────────────────────────────────────── */
body,
.main-panel,
.content,
.page-inner {
  font-family: var(--font-primary) !important;
  font-size:   var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color:       var(--clr-text-primary);
  letter-spacing: var(--ls-normal);
}

/* ── Headings ───────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family:    var(--font-primary) !important;
  font-weight:    var(--fw-semibold);
  line-height:    var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color:          var(--clr-text-primary);
}

h1, .h1 { font-size: var(--fs-4xl); font-weight: var(--fw-bold); }
h2, .h2 { font-size: var(--fs-3xl); font-weight: var(--fw-bold); }
h3, .h3 { font-size: var(--fs-2xl); }
h4, .h4 { font-size: var(--fs-xl);  }
h5, .h5 { font-size: var(--fs-lg);  font-weight: var(--fw-medium); }
h6, .h6 { font-size: var(--fs-base); font-weight: var(--fw-medium); }

/* ── Paragraphs ─────────────────────────────────────────────────── */
p {
  font-family: var(--font-primary) !important;
  font-size:   var(--fs-base);
  line-height: var(--lh-relaxed);
  color:       var(--clr-text-secondary);
}

.lead {
  font-family: var(--font-primary) !important;
  font-size:   var(--fs-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color:       var(--clr-text-secondary);
}

/* ── Navigation ─────────────────────────────────────────────────── */
.navbar,
.navbar-brand,
.navbar-text,
.nav-link {
  font-family: var(--font-primary) !important;
}

.navbar-text h2,
.navbar-text a {
  font-size:      var(--fs-xl) !important;
  font-weight:    var(--fw-bold) !important;
  letter-spacing: var(--ls-tight);
  line-height:    var(--lh-tight);
}

/* ── Forms ──────────────────────────────────────────────────────── */
input,
textarea,
select,
.form-control,
.form-select,
.input-group-text,
.chosen-single,
.chosen-drop,
.chosen-search input,
.chosen-results li,
label,
.form-label {
  font-family: var(--font-primary) !important;
  font-size:   var(--fs-sm) !important;
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
}

.form-label {
  font-weight:    var(--fw-medium) !important;
  font-size:      var(--fs-sm) !important;
  letter-spacing: var(--ls-wide);
  color:          var(--clr-text-secondary);
}

/* ── Buttons ────────────────────────────────────────────────────── */
button,
.btn,
[type="button"],
[type="submit"],
[type="reset"] {
  font-family:    var(--font-primary) !important;
  font-size:      var(--fs-sm) !important;
  font-weight:    var(--fw-medium);
  letter-spacing: var(--ls-wide);
}

.btn-lg {
  font-size: var(--fs-base) !important;
}

.btn-sm {
  font-size: var(--fs-xs) !important;
}

/* ── Cards ──────────────────────────────────────────────────────── */
.card-title {
  font-family:    var(--font-primary) !important;
  font-weight:    var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  color:          var(--clr-text-primary);
}

.card-category {
  font-family:    var(--font-primary) !important;
  font-size:      var(--fs-xs) !important;
  font-weight:    var(--fw-medium);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color:          var(--clr-text-muted);
}

.card-text {
  font-family: var(--font-primary) !important;
  font-size:   var(--fs-sm);
  line-height: var(--lh-relaxed);
  color:       var(--clr-text-secondary);
}

.card-footer {
  font-family: var(--font-primary) !important;
  font-size:   var(--fs-sm);
  font-weight: var(--fw-medium);
}

/* ── Badges ─────────────────────────────────────────────────────── */
.badge {
  font-family:    var(--font-primary) !important;
  font-size:      var(--fs-xs) !important;
  font-weight:    var(--fw-medium);
  letter-spacing: var(--ls-wide);
}

/* ── Dropdowns ──────────────────────────────────────────────────── */
.dropdown-menu,
.dropdown-item,
.dropdown-header {
  font-family: var(--font-primary) !important;
  font-size:   var(--fs-sm);
}

.dropdown-item {
  font-weight: var(--fw-regular);
}

/* ── Modals ─────────────────────────────────────────────────────── */
.modal,
.modal-title,
.modal-body,
.modal-footer,
.modal * {
  font-family: var(--font-primary) !important;
}

.modal-title {
  font-weight: var(--fw-semibold);
  font-size:   var(--fs-xl) !important;
}

/* ── Alerts ─────────────────────────────────────────────────────── */
.alert {
  font-family: var(--font-primary) !important;
  font-size:   var(--fs-sm);
  line-height: var(--lh-relaxed);
}

/* ── List group ─────────────────────────────────────────────────── */
.list-group-item {
  font-family: var(--font-primary) !important;
  font-size:   var(--fs-sm);
  line-height: var(--lh-relaxed);
}

/* ── Tables ─────────────────────────────────────────────────────── */
table,
th,
td {
  font-family: var(--font-primary) !important;
  font-size:   var(--fs-sm);
}

th {
  font-weight:    var(--fw-semibold);
  letter-spacing: var(--ls-wide);
}

/* ── Footer ─────────────────────────────────────────────────────── */
.footer,
.footer * {
  font-family: var(--font-primary) !important;
  font-size:   var(--fs-sm);
}

/* ── Small / muted ──────────────────────────────────────────────── */
small,
.small {
  font-family: var(--font-primary) !important;
  font-size:   var(--fs-xs);
}

.text-muted {
  font-family: var(--font-primary) !important;
  color:       var(--clr-text-muted) !important;
}

/* ── Map popup ──────────────────────────────────────────────────── */
.map-popup,
.map-popup * {
  font-family: var(--font-primary) !important;
}

.map-popup h4 {
  font-size:   var(--fs-base) !important;
  font-weight: var(--fw-semibold);
}

.map-popup p {
  font-size:   var(--fs-xs);
  line-height: var(--lh-relaxed);
}

/* ── Swipe / modal hints ────────────────────────────────────────── */
.swipe-indicator small {
  font-size:   var(--fs-xs) !important;
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-wide);
}

/* ── Category card ──────────────────────────────────────────────── */
.view-events {
  font-family:    var(--font-primary) !important;
  font-size:      var(--fs-sm);
  font-weight:    var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}

/* ── Spinner / loading ──────────────────────────────────────────── */
.spinner-border {
  /* inherits — no font needed */
}

/* ── Code / pre ─────────────────────────────────────────────────── */
code,
pre,
kbd,
samp {
  font-family: var(--font-mono) !important;
  font-size:   var(--fs-sm);
}