/* Konstruktor — цветной шрифт для заголовков.
   Подключение: <link rel="stylesheet" href="Konstruktor.css">
   Заголовок:   <h1 class="k-title">Набор в кружки открыт</h1>
   Палитры:     .k-title--red (по умолчанию), .k-title--teal, .k-title--red-dark, .k-title--teal-dark
   Раскраски:   .k-title--plain (без акцентного цвета), .k-title--mono (одноцветный), .k-plate (синие буквы на жёлтой плашке) */

@font-face {
  font-family: "Konstruktor";
  src: url("fonts/Konstruktor.woff2") format("woff2"),
       url("fonts/Konstruktor.ttf") format("truetype");
  font-weight: 100 900;      /* одно начертание на все веса: браузер не будет «жирнить» цветные буквы */
  font-style: normal;
  font-display: swap;
}

/* Палитры, встроенные в шрифт (таблица CPAL) */
@font-palette-values --konstruktor-red       { font-family: "Konstruktor"; base-palette: 0; }
@font-palette-values --konstruktor-teal      { font-family: "Konstruktor"; base-palette: 1; }
@font-palette-values --konstruktor-red-dark  { font-family: "Konstruktor"; base-palette: 2; }
@font-palette-values --konstruktor-teal-dark { font-family: "Konstruktor"; base-palette: 3; }

/* Без акцентных деталей: акцентный цвет (индекс 2) перекрашен во второй синий */
@font-palette-values --konstruktor-red-plain  { font-family: "Konstruktor"; base-palette: 0; override-colors: 2 #1294F8; }
@font-palette-values --konstruktor-teal-plain { font-family: "Konstruktor"; base-palette: 1; override-colors: 2 #1294F8; }
/* Одноцветный синий: все детали #1234F8 (для жёлтой плашки) */
@font-palette-values --konstruktor-mono { font-family: "Konstruktor"; base-palette: 0; override-colors: 1 #1234F8, 2 #1234F8; }

.k-title {
  font-family: "Konstruktor", "Arial Rounded MT Bold", Arial, sans-serif;
  font-weight: normal;
  font-synthesis: none;
  font-palette: --konstruktor-red;
  color: #1234F8;            /* цвет одноцветного фолбэка там, где цветные шрифты не поддерживаются */
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: uppercase; /* в шрифте только прописные; строчные и так покажутся прописными */
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
.k-title--red       { font-palette: --konstruktor-red; }
.k-title--teal      { font-palette: --konstruktor-teal; }
.k-title--red-dark  { font-palette: --konstruktor-red-dark;  color: #1294F8; }
.k-title--teal-dark { font-palette: --konstruktor-teal-dark; color: #1294F8; }
.k-title--plain     { font-palette: --konstruktor-red-plain; }
.k-title--teal.k-title--plain { font-palette: --konstruktor-teal-plain; }
.k-title--mono      { font-palette: --konstruktor-mono; }

/* Размеры заголовков */
.k-h1 { font-size: clamp(2.2rem, 6vw, 5rem); }
.k-h2 { font-size: clamp(1.6rem, 4vw, 3.2rem); }
.k-h3 { font-size: clamp(1.25rem, 2.6vw, 2.1rem); }

/* Синие буквы на жёлтой плашке — основное применение жёлтого */
.k-plate {
  display: inline-block;
  background: #F2CE1C;
  color: #1234F8;
  font-palette: --konstruktor-mono;
  padding: 0.28em 0.6em 0.22em;
  border-radius: 0.4em;
}

/* Фоны палитр */
.k-bg-red       { background: #EAE9F1; }
.k-bg-teal      { background: #E9ECF1; }
.k-bg-red-dark  { background: #12173A; }
.k-bg-teal-dark { background: #0F1E2C; }