/* ==========================================================================
   Lupie's Cafe — вариант 2. Палитра и типографика.

   Цвета взяты из присланной раскладки: коричневый и бирюзовый как основа,
   уголь под фон, светлый серый под текст. Каждая пара ниже посчитана, а не
   подобрана на глаз — цифра в комментарии это отношение контраста.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/geist-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Caveat";
  src: url("../assets/fonts/caveat-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* ---- бумага, основа ---- */
  --paper:       #F4F0EB;   /* фон страницы                                */
  --paper-2:     #EAE3DA;   /* приподнятые плоскости, карточки             */
  --paper-3:     #DED5C9;   /* линии и рамки                               */

  /* ---- чернила ---- */
  --ink:         #373130;   /* основной текст, 11.26:1 на бумаге           */
  --ink-soft:    #6B635F;   /* второстепенный текст, 5.18:1                */

  /* ---- коричневый ---- */
  --brown:       #7B503B;   /* с раскладки. на бумаге 6.06:1, белый 6.88:1 */
  --brown-deep:  #5D3B2C;   /* на бумаге 8.70:1                            */

  /* ---- бирюза ---- */
  --teal:        #518491;   /* с раскладки. только заливки и крупный текст */
  --teal-deep:   #3A606B;   /* текст и ссылки, 6.04:1. белый на ней 6.85:1 */
  --teal-pale:   #CFE0E2;   /* мягкая плашка под секции                    */

  /* ---- роли ---- */
  --bg:          var(--paper);
  --bg-raise:    var(--paper-2);
  --fg:          var(--ink);
  --fg-muted:    var(--ink-soft);
  --fg-faint:    #8A817C;
  --rule:        #DED5C9;
  --rule-soft:   #E8E0D6;
  --accent:      var(--brown);
  --accent-text: var(--brown);
  --on-brown:    #FFFFFF;
  --on-teal:     #FFFFFF;

  /* ---- шрифты ---- */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-text:    "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-hand:    "Caveat", "Segoe Script", cursive;

  /* ---- размер ---- */
  --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.9rem);
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.5vw, 1.6rem);
  --step-2:  clamp(1.7rem, 1.4rem + 1.4vw, 2.6rem);
  --step-3:  clamp(2.4rem, 1.8rem + 3vw, 4.6rem);

  /* ---- ритм ---- */
  --shell:     min(92vw, 1240px);
  --section-y: clamp(4rem, 9vh, 8rem);
  --nav-h:     68px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Плиты залиты ровным цветом. Никаких переходов и никакого затемнения:
   краска встык, как на печатной вывеске. */
.on-brown {
  background: var(--brown);
  --fg: #FFFFFF;
  --fg-muted: rgba(255, 255, 255, 0.88);
  --fg-faint: rgba(255, 255, 255, 0.7);
  --rule: rgba(255, 255, 255, 0.3);
  --rule-soft: rgba(255, 255, 255, 0.16);
  --accent-text: #FFFFFF;
  --bg-raise: var(--brown-deep);
  color: #FFFFFF;
  color-scheme: light;
}

.on-teal {
  background: var(--teal-deep);
  --fg: #FFFFFF;
  --fg-muted: rgba(255, 255, 255, 0.9);
  --fg-faint: rgba(255, 255, 255, 0.72);
  --rule: rgba(255, 255, 255, 0.32);
  --rule-soft: rgba(255, 255, 255, 0.18);
  --accent-text: #FFFFFF;
  --bg-raise: #2F4F58;
  color: #FFFFFF;
  color-scheme: light;
}

/* Мягкая холодная плашка на светлом — без белого текста, чернила прямо
   по ней: 8.9:1. */
.on-pale {
  background: var(--teal-pale);
  --rule: #B4CBCF;
  --rule-soft: #C4D7DA;
}