/* ============================================================
   Blatný & Zavadil — Colors & Type
   ============================================================
   Extracted from blatnyzavadil.cz: a fully achromatic system —
   cool light-grey page surfaces, true black ink, no brand color
   in the UI. Any chromatic warmth comes from photography only.
   Display type is a geometric sans (Futura-family); UI sans is
   a precise neutral grotesque; mono is reserved for technical
   labels (course codes, time, prices).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Inter+Tight:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ───────────────  Color — Neutrals  ─────────────── */
  /* A cool, near-achromatic page-to-ink scale, anchored on pure
     white. Page is #FFFFFF; alternating sections lean slightly
     cooler. Accents are pure black. No warmth in the UI. */
  --bz-page:         #FFFFFF;   /* page background — pure white */
  --bz-page-2:       #F4F4F4;   /* alternating section, hover surface */
  --bz-page-3:       #E8E8E8;   /* tertiary surface, soft fill */
  --bz-mist:         #CFCFCF;   /* heavy separators, muted chips */
  --bz-stone:        #A8A8A8;   /* placeholder text, thin button stroke */
  --bz-ash:          #848484;   /* secondary text — nav rendered tone */
  --bz-graphite:     #3A3A3A;   /* tertiary contrast */
  --bz-ink:          #000000;   /* primary text — true black, as on site */
  --bz-snow:         #FCFCFC;   /* near-white — slightly off, peeking */
  --bz-white:        #FFFFFF;   /* pure white — same as page */

  /* Backwards-compat aliases — older specimens reference paper-*. */
  --bz-paper:        var(--bz-page);
  --bz-paper-2:      var(--bz-page-2);
  --bz-paper-3:      var(--bz-page-3);
  --bz-bone:         var(--bz-mist);

  /* ───────────────  Color — Accent  ─────────────── */
  /* The site is fully achromatic. There is no brand color in
     the UI. The previous `--bz-signal-*` red has been removed.
     If a brand-owner-confirmed accent is added later, define it
     here and document its scope (≤ 5% coverage rule). */
  --bz-accent:       var(--bz-ink);          /* accent = ink */
  --bz-accent-deep:  var(--bz-ink);
  --bz-accent-tint:  var(--bz-page-2);

  /* Aliases preserved for back-compat in older specimens. */
  --bz-signal:       var(--bz-ink);
  --bz-signal-deep:  var(--bz-ink);
  --bz-signal-tint:  var(--bz-page-2);

  /* ───────────────  Color — Semantic  ─────────────── */
  /* The site itself defines no semantic colors. These are the
     minimum needed for forms; greys are preferred where possible. */
  --bz-success:      #2E2E2E;   /* deep grey — confirmations */
  --bz-warn:         #5A5A5A;   /* mid grey — schedule warnings */
  --bz-error:        #000000;   /* black + iconographic emphasis */

  /* ───────────────  Surfaces & roles  ─────────────── */
  --bz-bg:           var(--bz-page);
  --bz-bg-alt:       var(--bz-page-2);
  --bz-bg-inverse:   var(--bz-ink);
  --bz-fg:           var(--bz-ink);
  --bz-fg-2:         var(--bz-ash);
  --bz-fg-3:         var(--bz-stone);
  --bz-fg-inverse:   var(--bz-page);
  --bz-border:       var(--bz-ink);          /* hairlines are ink */
  --bz-border-soft:  var(--bz-mist);
  --bz-divider:      rgba(0, 0, 0, 0.14);

  /* ───────────────  Type — Families  ─────────────── */
  /* Display is Montserrat (geometric sans, Google Fonts), a
     close geometric match to the Futura-family used on
     blatnyzavadil.cz, with Czech (Latin Extended) coverage. */
  --bz-font-display: "Montserrat", "Futura", "Avenir Next", "Avenir", "Century Gothic", sans-serif;
  --bz-font-sans:    "Inter Tight", "Söhne", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bz-font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ───────────────  Type — Scale (1.250 minor third) ─── */
  --bz-size-12: 0.75rem;   /* 12 — micro labels, codes */
  --bz-size-13: 0.8125rem; /* 13 — eyebrow, captions */
  --bz-size-14: 0.875rem;  /* 14 — UI body small */
  --bz-size-16: 1rem;      /* 16 — UI body default */
  --bz-size-18: 1.125rem;  /* 18 — comfortable body */
  --bz-size-22: 1.375rem;  /* 22 — sub-lede */
  --bz-size-28: 1.75rem;   /* 28 — h4 / card title */
  --bz-size-36: 2.25rem;   /* 36 — h3 */
  --bz-size-48: 3rem;      /* 48 — h2 */
  --bz-size-64: 4rem;      /* 64 — h1 */
  --bz-size-96: 6rem;      /* 96 — display */
  --bz-size-144: 9rem;     /* 144 — hero / oversize editorial */

  /* ───────────────  Type — Weights & metrics  ─────────────── */
  --bz-weight-light:    300;
  --bz-weight-regular:  400;
  --bz-weight-medium:   500;
  --bz-weight-semibold: 600;

  --bz-leading-tight:  1.04;
  --bz-leading-snug:   1.18;
  --bz-leading-normal: 1.45;
  --bz-leading-loose:  1.65;

  --bz-track-tight: -0.02em;   /* large display serifs */
  --bz-track-base:  -0.005em;  /* body sans */
  --bz-track-wide:   0.08em;   /* eyebrow caps */
  --bz-track-mono:   0.04em;   /* technical mono labels */

  /* ───────────────  Spacing (4px base)  ─────────────── */
  --bz-s-1:   4px;
  --bz-s-2:   8px;
  --bz-s-3:  12px;
  --bz-s-4:  16px;
  --bz-s-5:  24px;
  --bz-s-6:  32px;
  --bz-s-7:  48px;
  --bz-s-8:  64px;
  --bz-s-9:  96px;
  --bz-s-10: 128px;
  --bz-s-11: 192px;

  /* ───────────────  Radii  ─────────────── */
  /* Editorial means MOSTLY square. Soft radii are decorative
     accents only (avatars, the rare image card). Never rounded
     buttons. Never rounded cards. Never rounded inputs. */
  --bz-r-0:   0px;
  --bz-r-1:   2px;     /* the only allowed "softening" on inputs */
  --bz-r-pill: 999px;  /* used ONLY on chips/avatars */

  /* ───────────────  Borders & rules  ─────────────── */
  --bz-rule-hair: 0.5px;
  --bz-rule-1:    1px;
  --bz-rule-2:    2px;

  /* ───────────────  Shadows  ─────────────── */
  /* Almost none. The system relies on rules and contrast, not
     elevation. Two restrained options for menu/modal only. */
  --bz-shadow-0:   none;
  --bz-shadow-pop: 0 1px 0 rgba(0,0,0,0.06), 0 8px 24px -12px rgba(0,0,0,0.20);
  --bz-shadow-modal: 0 24px 64px -24px rgba(0,0,0,0.36);

  /* ───────────────  Motion  ─────────────── */
  --bz-ease:       cubic-bezier(0.2, 0.6, 0.2, 1);   /* default */
  --bz-ease-in:    cubic-bezier(0.4, 0,   1, 1);
  --bz-ease-out:   cubic-bezier(0,   0.4, 0.2, 1);
  --bz-dur-1: 120ms;
  --bz-dur-2: 200ms;
  --bz-dur-3: 320ms;
  --bz-dur-4: 480ms;

  /* ───────────────  Layout  ─────────────── */
  --bz-container:    1280px;
  --bz-container-w:  1440px;   /* wide editorial */
  --bz-gutter:       24px;
  --bz-gutter-lg:    48px;
}

/* Mobile gutter shrinks so content has room on narrow screens. */
@media (max-width: 768px) {
  :root {
    --bz-gutter: 16px;
  }
}

/* Prevent any element pushing horizontal overflow on the body. */
html, body { max-width: 100%; overflow-x: hidden; }
.bz-scope { overflow-x: clip; }

/* =================================================================
   Semantic element styles — drop-in defaults that match the system.
   Authors can lean on .bz-* classes OR raw element selectors when
   inside a .bz-scope wrapper.
   ================================================================= */

.bz-scope, .bz-scope * { box-sizing: border-box; }

.bz-scope {
  background: var(--bz-bg);
  color: var(--bz-fg);
  font-family: var(--bz-font-sans);
  font-size: var(--bz-size-16);
  line-height: var(--bz-leading-normal);
  letter-spacing: var(--bz-track-base);
  font-weight: var(--bz-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ─── Display — geometric sans (Futura PT), tight & confident ─── */
.bz-display, .bz-h1, .bz-h2 {
  font-family: var(--bz-font-display);
  font-weight: var(--bz-weight-medium);
  letter-spacing: 0.01em;            /* slight positive — geometric reads better */
  line-height: var(--bz-leading-tight);
  color: var(--bz-fg);
  text-transform: uppercase;          /* matches site (STŘIHOVÁ AKADEMIE) */
}
.bz-display { font-size: clamp(64px, 9vw, var(--bz-size-144)); }
.bz-h1      { font-size: clamp(44px, 5.2vw, var(--bz-size-96)); }
.bz-h2      { font-size: clamp(32px, 3.6vw, var(--bz-size-64)); }

/* ─── Mid headings — sans, precise ─── */
.bz-h3, .bz-h4 {
  font-family: var(--bz-font-sans);
  font-weight: var(--bz-weight-regular);
  letter-spacing: -0.01em;
  line-height: var(--bz-leading-snug);
}
.bz-h3 { font-size: var(--bz-size-36); }
.bz-h4 { font-size: var(--bz-size-22); font-weight: var(--bz-weight-medium); }

/* ─── Body ─── */
.bz-lede {
  font-size: var(--bz-size-22);
  line-height: var(--bz-leading-snug);
  color: var(--bz-fg-2);
  font-weight: var(--bz-weight-regular);
}
.bz-body  { font-size: var(--bz-size-16); line-height: var(--bz-leading-normal); }
.bz-body-lg { font-size: var(--bz-size-18); line-height: var(--bz-leading-loose); }
.bz-small { font-size: var(--bz-size-14); color: var(--bz-fg-2); }

/* ─── Eyebrow / micro labels ─── */
.bz-eyebrow {
  font-family: var(--bz-font-sans);
  font-size: var(--bz-size-12);
  font-weight: var(--bz-weight-medium);
  letter-spacing: var(--bz-track-wide);
  text-transform: uppercase;
  color: var(--bz-fg-2);
}

.bz-mono {
  font-family: var(--bz-font-mono);
  font-size: var(--bz-size-12);
  letter-spacing: var(--bz-track-mono);
  text-transform: uppercase;
  color: var(--bz-fg-2);
}

/* ─── Editorial italic (the brand voice) ─── */
/* Editorial italic helper — retained as opt-in only. The site
   does not use italic display copy; prefer uppercase Futura. */
.bz-italic {
  font-family: var(--bz-font-display);
  font-style: italic;
  font-weight: var(--bz-weight-regular);
}

/* ─── Links ─── */
.bz-scope a {
  color: var(--bz-fg);
  text-decoration: none;
  border-bottom: 1px solid var(--bz-fg);
  padding-bottom: 1px;
  transition: color var(--bz-dur-1) var(--bz-ease),
              border-color var(--bz-dur-1) var(--bz-ease);
}
.bz-scope a:hover {
  color: var(--bz-ash);
  border-bottom-color: var(--bz-ash);
}

/* ─── Horizontal rule — the structural device ─── */
.bz-rule {
  border: 0;
  border-top: var(--bz-rule-1) solid var(--bz-border);
  margin: 0;
}
.bz-rule--hair { border-top-width: var(--bz-rule-hair); border-top-color: var(--bz-divider); }

/* ─── Selection ─── */
.bz-scope ::selection {
  background: var(--bz-ink);
  color: var(--bz-page);
}