/* =========================================================
   KNYAZ_VPN — Design Tokens
   Стилистика: русская сказочно-былинная (хохлома, Билибин,
   городецкая роспись, резьба по дереву, геральдика)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Forum&family=Marck+Script&family=PT+Serif:ital,wght@0,400;0,700;1,400&family=PT+Sans:wght@400;700&display=swap');

:root {
  /* ----------  ЦВЕТА  ---------- */
  /* Базовая холщёво-пергаментная подложка */
  --parchment-50:  #f7ecd1;   /* светлый пергамент */
  --parchment-100: #f0dfb4;   /* основной пергамент */
  --parchment-200: #e6cf95;   /* пергамент потемнее */
  --parchment-300: #d8b777;   /* состаренный */

  /* Княжеская гамма — багряный, золотой, изумруд */
  --crimson-900:   #5b0e0e;   /* запёкшийся багряный */
  --crimson-700:   #8b1818;   /* основной багряный — кафтан */
  --crimson-500:   #b52a2a;   /* акцентный красный */
  --crimson-300:   #d65656;   /* подсветка */

  --gold-900:      #6b4a0c;   /* тёмная позолота */
  --gold-700:      #a87616;   /* основное золото */
  --gold-500:      #d4a017;   /* солнечное золото — хохлома */
  --gold-300:      #f0c84b;   /* лёгкое золото */
  --gold-100:      #ffe9a8;   /* блик */

  --emerald-900:   #1a3a1f;   /* тёмная лесная */
  --emerald-700:   #2d5a32;   /* основной лес */
  --emerald-500:   #4a8050;   /* трава */

  --sky-700:       #2a5a8a;   /* княжеский лазоревый */
  --sky-500:       #4a82b8;   /* небо на иконе */

  /* Древесина и углы */
  --oak-900:       #1f1410;   /* почти чёрный мореный */
  --oak-700:       #3a2418;   /* тёмный дуб */
  --oak-500:       #6b4423;   /* дуб */
  --oak-300:       #a07043;   /* светлый дуб */

  --ink:           #2a1a10;   /* чернила-уголь для текста */
  --ink-soft:      #4a3525;

  /* Семантика */
  --bg:            var(--parchment-100);
  --bg-elevated:   var(--parchment-50);
  --bg-dark:       var(--oak-900);
  --fg:            var(--ink);
  --fg-soft:       var(--ink-soft);
  --fg-inverse:    var(--parchment-50);
  --accent:        var(--crimson-700);
  --accent-2:      var(--gold-500);
  --border:        var(--oak-500);
  --border-soft:   var(--oak-300);

  /* ----------  ТИПОГРАФИКА  ---------- */
  --font-display:  'Forum', 'PT Serif', Georgia, serif;       /* заголовки, былинный */
  --font-script:   'Marck Script', cursive;                    /* рукописные акценты */
  --font-body:     'PT Serif', Georgia, serif;                 /* основной текст */
  --font-ui:       'PT Sans', system-ui, sans-serif;           /* UI, кнопки */

  --text-xs:    13px;
  --text-sm:    15px;
  --text-base:  17px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   32px;
  --text-3xl:   44px;
  --text-4xl:   60px;
  --text-5xl:   84px;

  /* ----------  ПРОЧЕЕ  ---------- */
  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;

  --shadow-sm: 0 2px 0 rgba(58,36,24,.15), 0 4px 12px rgba(58,36,24,.08);
  --shadow:    0 4px 0 rgba(58,36,24,.22), 0 12px 28px rgba(58,36,24,.15);
  --shadow-lg: 0 8px 0 rgba(58,36,24,.28), 0 24px 60px rgba(58,36,24,.22);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;
  --space-12: 96px;
  --space-16: 128px;
}

/* ----------  ОБЩИЕ СТИЛИ  ---------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--crimson-900);
  margin: 0 0 .5em;
  line-height: 1.05;
  letter-spacing: .01em;
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

p { margin: 0 0 1em; }
a { color: var(--crimson-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--crimson-500); }

/* ----------  ПЕРГАМЕНТ — ТЕКСТУРА ФОНА  ---------- */
.parchment {
  background-color: var(--parchment-100);
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(255,233,168,.45), transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 90%, rgba(168,118,22,.18), transparent 60%),
    radial-gradient(circle at 30% 70%, rgba(91,14,14,.06), transparent 30%),
    repeating-radial-gradient(circle at 50% 50%, rgba(107,68,35,.04) 0, rgba(107,68,35,.04) 1px, transparent 1px, transparent 4px);
}

.parchment-dark {
  background-color: var(--oak-900);
  background-image:
    radial-gradient(ellipse 60% 80% at 10% 20%, rgba(212,160,23,.10), transparent 60%),
    radial-gradient(ellipse 70% 50% at 90% 80%, rgba(139,24,24,.18), transparent 60%);
  color: var(--parchment-50);
}
.parchment-dark h1, .parchment-dark h2, .parchment-dark h3 { color: var(--gold-300); }

/* Деревянная доска */
.wood {
  background-color: var(--oak-700);
  background-image:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.08) 0 1px, transparent 1px 60px,
      rgba(255,255,255,.04) 60px 61px, transparent 61px 120px),
    repeating-linear-gradient(180deg,
      rgba(0,0,0,.12) 0 2px, transparent 2px 24px);
  color: var(--gold-100);
}

/* ----------  КНОПКИ  ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .02em;
  padding: 14px 26px;
  border-radius: 999px;
  border: 2px solid var(--oak-700);
  background: var(--gold-500);
  color: var(--oak-900);
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 0 var(--oak-700), 0 10px 20px rgba(58,36,24,.25);
  transition: transform .12s ease, box-shadow .12s ease;
  position: relative;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--oak-700), 0 14px 28px rgba(58,36,24,.3); color: var(--oak-900); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--oak-700), 0 4px 8px rgba(58,36,24,.2); }

.btn--primary { background: var(--crimson-700); color: var(--gold-100); border-color: var(--crimson-900); box-shadow: 0 4px 0 var(--crimson-900), 0 10px 20px rgba(91,14,14,.4); }
.btn--primary:hover { background: var(--crimson-500); color: var(--gold-100); box-shadow: 0 6px 0 var(--crimson-900), 0 14px 28px rgba(91,14,14,.4); }
.btn--primary:active { box-shadow: 0 1px 0 var(--crimson-900), 0 4px 8px rgba(91,14,14,.3); }

.btn--ghost { background: transparent; color: var(--crimson-900); border-color: var(--crimson-900); box-shadow: none; }
.btn--ghost:hover { background: rgba(91,14,14,.08); transform: none; box-shadow: none; }

.btn--lg { padding: 18px 34px; font-size: 18px; }
.btn--sm { padding: 9px 18px; font-size: 14px; }

/* ----------  УЗОРЧАТЫЕ РАЗДЕЛИТЕЛИ  ---------- */
.ornament {
  display: block;
  width: 100%;
  height: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 32'><g fill='none' stroke='%238b1818' stroke-width='1.5'><path d='M0 16 H80'/><path d='M120 16 H200'/><circle cx='100' cy='16' r='6' fill='%23d4a017' stroke='%238b1818'/><circle cx='100' cy='16' r='2' fill='%238b1818'/><path d='M88 16 q-4 -8 -8 0 q4 8 8 0z' fill='%238b1818'/><path d='M112 16 q4 -8 8 0 q-4 8 -8 0z' fill='%238b1818'/></g></svg>");
  background-repeat: repeat-x;
  background-position: center;
}

/* ----------  ХОХЛОМСКОЙ ОРНАМЕНТ (декоративные ягоды на ветке)  ---------- */
.khokhloma-border {
  border: 3px solid var(--crimson-700);
  border-radius: var(--radius-lg);
  position: relative;
}
.khokhloma-border::before,
.khokhloma-border::after {
  content: '';
  position: absolute;
  width: 60px; height: 60px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'><g><path d='M10 50 Q30 10, 50 50' fill='none' stroke='%23d4a017' stroke-width='2.5'/><circle cx='30' cy='22' r='5' fill='%238b1818'/><circle cx='22' cy='30' r='4' fill='%238b1818'/><circle cx='38' cy='30' r='4' fill='%238b1818'/><path d='M15 45 Q12 35, 18 32' fill='none' stroke='%232d5a32' stroke-width='2'/><path d='M45 45 Q48 35, 42 32' fill='none' stroke='%232d5a32' stroke-width='2'/></g></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}
.khokhloma-border::before { top: -12px; left: -12px; }
.khokhloma-border::after  { bottom: -12px; right: -12px; transform: rotate(180deg); }

/* ----------  УТИЛИТЫ  ---------- */
.container { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.container-narrow { max-width: 880px; margin: 0 auto; padding: 0 28px; }

.script { font-family: var(--font-script); color: var(--crimson-700); font-size: 1.4em; line-height: 1; }
.eyebrow { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .22em; font-size: 13px; font-weight: 700; color: var(--gold-700); }
.muted { color: var(--fg-soft); }

.gold-text { color: var(--gold-700); }
.crimson-text { color: var(--crimson-700); }