/* ──────────────────────────────────────────────────────────
   kmbs Design System — tokens
   Kyiv-Mohyla Business School (kmbs.ua)
   Sourced from the kmbs [UI design] Figma file.
   ────────────────────────────────────────────────────────── */

@font-face {
  font-family: "NAMU";
  src: url("fonts/NAMU-Pro.woff2") format("woff2"),
       url("fonts/NAMU-Pro.woff") format("woff"),
       url("fonts/NAMU-Pro.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* NAMU Pro is the kmbs house typeface — loaded locally from
   /fonts/. Used for everything: display, body, UI, meta.
   No secondary face. */

:root {
  /* ── Brand palette ─────────────────────────────────────── */
  --kmbs-black:        rgb(0, 0, 0);         /* primary ink */
  --kmbs-ink:          rgb(17, 17, 17);      /* near-black text */
  --kmbs-graphite:     rgb(71, 76, 84);      /* dark surface + secondary text */
  --kmbs-graphite-2:   rgb(86, 86, 86);
  --kmbs-graphite-3:   rgb(77, 77, 77);

  --kmbs-silver:       rgb(223, 225, 227);   /* page bg / header bg */
  --kmbs-silver-2:     rgb(217, 217, 217);
  --kmbs-silver-3:     rgb(205, 205, 213);
  --kmbs-silver-4:     rgb(238, 238, 238);
  --kmbs-silver-5:     rgb(218, 218, 218);
  --kmbs-hairline:     rgb(171, 171, 181);
  --kmbs-white:        rgb(255, 255, 255);

  /* Accent — maritime blue + cyan/teal family */
  --kmbs-blue-deep:    rgb(0, 85, 125);      /* deep navy accent */
  --kmbs-blue:         rgb(44, 189, 238);    /* "ВСІ НОВИНИ" link color */
  --kmbs-blue-soft:    rgb(214, 246, 255);
  --kmbs-blue-pale:    rgb(161, 239, 255);

  --kmbs-teal:         rgb(0, 174, 185);     /* Intelect-prostir cards */
  --kmbs-teal-deep:    rgb(0, 105, 101);
  --kmbs-teal-muted:   rgb(103, 184, 195);
  --kmbs-mint:         rgb(0, 230, 211);     /* CTA highlight */
  --kmbs-mint-bright:  rgb(94, 255, 238);
  --kmbs-mint-soft:    rgb(183, 255, 246);

  --kmbs-sand:         rgb(110, 105, 85);

  /* ── Semantic surfaces & text ──────────────────────────── */
  --bg-page:           var(--kmbs-silver);
  --bg-surface:        var(--kmbs-white);
  --bg-dark:           var(--kmbs-graphite);
  --bg-dark-ink:       var(--kmbs-black);
  --bg-accent-teal:    var(--kmbs-teal);
  --bg-accent-mint:    var(--kmbs-mint);

  --fg:                var(--kmbs-black);
  --fg-2:              var(--kmbs-graphite);
  --fg-muted:          rgba(0, 0, 0, 0.5);
  --fg-on-dark:        var(--kmbs-white);
  --fg-on-dark-muted:  rgba(255, 255, 255, 0.6);
  --fg-link:           var(--kmbs-blue-deep);
  --fg-link-bright:    var(--kmbs-blue);

  --border:            var(--kmbs-graphite);
  --border-soft:       var(--kmbs-silver);
  --hairline:          var(--kmbs-hairline);

  --shadow-soft:       0 10px 40px rgba(0, 0, 0, 0.08);
  --shadow-card:       0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-lift:       0 20px 60px rgba(0, 0, 0, 0.18);

  /* ── Radii ─────────────────────────────────────────────── */
  --r-xs: 6px;
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 25px;   /* card default */
  --r-xl: 30px;   /* header pill */
  --r-pill: 9999px;

  /* ── Spacing ───────────────────────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 30px;
  --s-8: 40px;
  --s-9: 60px;
  --s-10: 80px;
  --s-11: 100px;

  /* Page grid: 1440 canvas, 15px outer gutter, 30px column gap */
  --page-max: 1440px;
  --page-gutter: 15px;
  --grid-gap: 30px;

  /* ── Typography ────────────────────────────────────────── */
  --font-sans: "NAMU", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-display: "NAMU", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-alt: "NAMU", "Inter", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — from Figma usage */
  --fs-hero:       90px;    /* page hero — "Києво-Могилянська бізнес-школа [kmbs]" */
  --fs-display:    50px;
  --fs-h1:         32px;
  --fs-h2:         28px;    /* card heading */
  --fs-h3:         24px;    /* program title */
  --fs-h4:         18px;
  --fs-body-lg:    18px;
  --fs-body:       16px;    /* default body */
  --fs-body-sm:    14px;
  --fs-meta:       13px;    /* tag/eyebrow */
  --fs-micro:      12px;    /* timestamps, copyright */

  --lh-tight: 1.0;
  --lh-snug:  1.1;
  --lh-body:  1.2;
  --lh-loose: 1.3;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-meta:   0.02em;   /* timestamps */
  --tracking-eyebrow: 0.06em;  /* small caps eyebrows */
}

/* ── Semantic roles ─────────────────────────────────────── */

html, body {
  background: var(--bg-page);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.h-hero,
h1.hero {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  font-weight: 400;
  margin: 0;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  font-weight: 500;
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  font-weight: 400;
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  font-weight: 400;
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 500;
  margin: 0;
}

p, .p {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  margin: 0;
}

.p-body {
  font-size: var(--fs-body);
  line-height: 1.4;
}

/* Small caps eyebrow — used for program category labels,
   podcast/article kicker ("подкаст", "Для засновників бізнесу") */
.eyebrow {
  font-size: var(--fs-meta);
  letter-spacing: var(--tracking-eyebrow);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  text-transform: none; /* kmbs keeps lowercase Cyrillic */
}

/* Dates, footer fine print */
.meta {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-meta);
  line-height: var(--lh-loose);
  color: var(--fg);
}

/* UI label inside buttons & fields */
.label {
  font-size: var(--fs-body);
  line-height: 1;
}

/* Link styles — the accent blue "ВСІ НОВИНИ →" pattern */
a.cta-link,
.cta-link {
  font-size: var(--fs-body);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg);
  text-decoration: none;
  display: inline-flex;
  gap: 16px;
  align-items: center;
}
.cta-link .arrow { color: var(--fg-link-bright); }

code, .code {
  font-family: var(--font-mono);
  font-size: 0.95em;
}