/* ==========================================================================
   Баргузинский заповедник — colors_and_type.css
   Tokens: colors, typography, spacing, radii, shadows, motion
   Import this into any page:  <link rel="stylesheet" href="colors_and_type.css">
   ========================================================================== */

/* ---- Local @font-face (drop files into /fonts to activate) ---------------
   Пока файлов нет — подключения просто не сработают и применится системный
   fallback (Georgia → body / Helvetica Neue → UI). Положите файлы в /fonts
   под именами ниже — шрифты подхватятся автоматически. Подробности: fonts/README.md
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'PT Serif';
  font-style: normal; font-weight: 400;
  src: local('PT Serif'), url('fonts/PTSerif-Regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal; font-weight: 700;
  src: local('PT Serif Bold'), url('fonts/PTSerif-Bold.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'PT Serif';
  font-style: italic; font-weight: 400;
  src: local('PT Serif Italic'), url('fonts/PTSerif-Italic.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'PT Serif';
  font-style: italic; font-weight: 700;
  src: local('PT Serif Bold Italic'), url('fonts/PTSerif-BoldItalic.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal; font-weight: 400;
  src: local('Golos Text'), url('fonts/GolosText-Regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal; font-weight: 500;
  src: local('Golos Text Medium'), url('fonts/GolosText-Medium.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal; font-weight: 600;
  src: local('Golos Text SemiBold'), url('fonts/GolosText-SemiBold.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal; font-weight: 700;
  src: local('Golos Text Bold'), url('fonts/GolosText-Bold.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 400;
  src: local('IBM Plex Mono'), url('fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 500;
  src: local('IBM Plex Mono Medium'), url('fonts/IBMPlexMono-Medium.woff2') format('woff2');
  font-display: swap;
}

:root {
  /* ---- COLOR: base neutrals (warm paper, not white) --------------------- */
  --paper:           #F5EFE4;   /* основной фон — тёплая бумага */
  --paper-raised:    #FBF6EB;   /* карточка / приподнятый слой */
  --paper-sunk:      #EDE5D4;   /* вдавленный слой, input bg */
  --mist:            #E8E0D2;   /* вторичный фон, разделители */
  --mist-strong:     #D9CFBC;   /* бордюры */

  /* ---- COLOR: sable (главная чернильная ось) ---------------------------- */
  --sable-50:        #F3EEE5;
  --sable-100:       #E2D6C4;
  --sable-200:       #C7B39B;
  --sable-300:       #9E8469;
  --sable-400:       #6F5840;
  --sable-500:       #4D3A26;
  --sable-600:       #3A2A1E;   /* CORE: основной текст, «чернила» */
  --sable-700:       #2B1F15;
  --sable-800:       #1C140D;
  --sable-900:       #0F0A06;

  /* ---- COLOR: cedar (акцент тепла — заголовки, метки) ------------------- */
  --cedar-50:        #F4E9DA;
  --cedar-100:       #E3CBA6;
  --cedar-200:       #C89B5C;   /* охра / берёста */
  --cedar-300:       #A67238;
  --cedar-400:       #8A5A28;
  --cedar-500:       #6B4423;   /* CORE: кедр — акцент */
  --cedar-600:       #54331A;
  --cedar-700:       #3D2512;

  /* ---- COLOR: taiga (живой, для флоры/фауны) ---------------------------- */
  --taiga-50:        #E9ECDF;
  --taiga-100:       #C7D1AE;
  --taiga-200:       #94A676;
  --taiga-300:       #6B7F4E;
  --taiga-400:       #4A5D3A;   /* CORE: мох / тайга */
  --taiga-500:       #364529;
  --taiga-600:       #22301A;

  /* ---- COLOR: baikal (холодный, для данных / карт) ---------------------- */
  --baikal-50:       #E3EBEF;
  --baikal-100:       #B9CFD6;
  --baikal-200:       #8AAEB9;
  --baikal-300:       #6B94A8;   /* поверхность озера */
  --baikal-400:       #3F6A82;
  --baikal-500:       #1E3A4C;   /* CORE: байкал глубокий */
  --baikal-600:       #132735;

  /* ---- COLOR: signal (аккуратно, для ошибок/успеха/меток) --------------- */
  --signal-red:      #A53F2B;   /* тревога, краснокнижный вид */
  --signal-amber:    #C88A2B;   /* предупреждение */
  --signal-green:    #4A7A3D;   /* восстановленная популяция */

  /* ---- SEMANTIC: foreground ---------------------------------------------- */
  --fg:              var(--sable-600);
  --fg-muted:        var(--sable-400);
  --fg-subtle:       var(--sable-300);
  --fg-inverse:      var(--paper);
  --fg-accent:       var(--cedar-500);
  --fg-link:         var(--cedar-500);
  --fg-link-hover:   var(--sable-600);

  /* ---- SEMANTIC: background --------------------------------------------- */
  --bg:              var(--paper);
  --bg-raised:       var(--paper-raised);
  --bg-sunk:         var(--paper-sunk);
  --bg-inverse:      var(--sable-700);
  --bg-accent:       var(--cedar-200);

  /* ---- SEMANTIC: borders ------------------------------------------------ */
  --border:          var(--mist-strong);
  --border-strong:   var(--sable-200);
  --border-double:   var(--cedar-500);
  --divider:         var(--mist);

  /* ==== TYPOGRAPHY ======================================================= */
  --font-display:    'PT Serif', 'Times New Roman', Georgia, serif;
  --font-body:       'Golos Text', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-mono:       'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  /* Type scale — modular, 1.25 step */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    22px;
  --text-xl:    28px;
  --text-2xl:   36px;
  --text-3xl:   48px;
  --text-4xl:   64px;
  --text-5xl:   88px;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --tracking-stamp: 0.16em;   /* для штампов и мелких caps */
  --tracking-meta:  0.08em;   /* для мета-подписей caps */
  --tracking-tight: -0.01em;  /* для больших display */

  /* ---- Semantic type tokens -------------------------------------------- */
  --h1-size:    var(--text-4xl);
  --h1-lh:      var(--lh-tight);
  --h1-family:  var(--font-display);
  --h1-weight:  700;
  --h1-tracking: var(--tracking-tight);

  --h2-size:    var(--text-2xl);
  --h2-lh:      var(--lh-snug);
  --h2-family:  var(--font-display);
  --h2-weight:  700;

  --h3-size:    var(--text-xl);
  --h3-lh:      var(--lh-snug);
  --h3-family:  var(--font-display);
  --h3-weight:  700;

  --h4-size:    var(--text-md);
  --h4-lh:      var(--lh-snug);
  --h4-family:  var(--font-body);
  --h4-weight:  600;

  --body-size:  var(--text-md);
  --body-lh:    var(--lh-relaxed);
  --body-family: var(--font-body);

  --small-size: var(--text-sm);
  --small-lh:   var(--lh-normal);

  --caption-size: var(--text-xs);
  --caption-lh:   var(--lh-normal);
  --caption-tracking: var(--tracking-meta);

  --mono-size:  var(--text-sm);
  --mono-family: var(--font-mono);

  --quote-size: var(--text-lg);
  --quote-family: var(--font-display);
  --quote-style: italic;

  /* ==== SPACING ========================================================== */
  --space-2:   2px;
  --space-4:   4px;
  --space-8:   8px;
  --space-12:  12px;
  --space-16:  16px;
  --space-24:  24px;
  --space-32:  32px;
  --space-48:  48px;
  --space-64:  64px;
  --space-96:  96px;
  --space-128: 128px;

  /* ==== RADII ============================================================ */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* ==== SHADOWS ========================================================== */
  --shadow-card:
    0 1px 2px rgba(58, 42, 30, 0.06),
    0 4px 12px rgba(58, 42, 30, 0.04);
  --shadow-pop:
    0 8px 24px rgba(58, 42, 30, 0.12),
    0 2px 4px rgba(58, 42, 30, 0.06);
  --shadow-inset:
    inset 0 1px 2px rgba(58, 42, 30, 0.08);

  /* ==== MOTION =========================================================== */
  --ease-field:  cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-out:    cubic-bezier(0.4, 0.0, 0.2, 1.0);
  --ease-in:     cubic-bezier(0.4, 0.0, 1.0, 1.0);
  --dur-fast:    180ms;
  --dur-base:    240ms;
  --dur-slow:    480ms;
  --dur-reveal:  560ms;

  /* ==== LAYOUT =========================================================== */
  --content-width: 720px;   /* read width for articles */
  --page-width:   1200px;   /* outer grid */
  --gutter:       24px;
}

/* ==========================================================================
   BASE RESET + DEFAULTS
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body-family);
  font-size: var(--body-size);
  line-height: var(--body-lh);
}

/* Headings */
h1, .h1 {
  font-family: var(--h1-family);
  font-size: var(--h1-size);
  line-height: var(--h1-lh);
  font-weight: var(--h1-weight);
  letter-spacing: var(--h1-tracking);
  color: var(--fg);
  margin: 0 0 var(--space-24);
}
h2, .h2 {
  font-family: var(--h2-family);
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  font-weight: var(--h2-weight);
  color: var(--fg);
  margin: 0 0 var(--space-16);
}
h3, .h3 {
  font-family: var(--h3-family);
  font-size: var(--h3-size);
  line-height: var(--h3-lh);
  font-weight: var(--h3-weight);
  color: var(--fg);
  margin: 0 0 var(--space-12);
}
h4, .h4 {
  font-family: var(--h4-family);
  font-size: var(--h4-size);
  line-height: var(--h4-lh);
  font-weight: var(--h4-weight);
  color: var(--fg);
  margin: 0 0 var(--space-8);
}

p { margin: 0 0 var(--space-16); text-wrap: pretty; }

small, .small { font-size: var(--small-size); line-height: var(--small-lh); }

.caption {
  font-family: var(--font-mono);
  font-size: var(--caption-size);
  line-height: var(--caption-lh);
  letter-spacing: var(--caption-tracking);
  text-transform: uppercase;
  color: var(--fg-muted);
}

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

blockquote, .quote {
  font-family: var(--quote-family);
  font-style: var(--quote-style);
  font-size: var(--quote-size);
  line-height: var(--lh-snug);
  color: var(--fg);
  border-left: 3px double var(--cedar-500);
  padding-left: var(--space-16);
  margin: var(--space-24) 0;
}

a {
  color: var(--fg-link);
  text-decoration-color: var(--cedar-200);
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--fg-link-hover); }
a:focus-visible {
  outline: 2px solid var(--cedar-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

hr {
  border: none;
  border-top: 3px double var(--cedar-500);
  margin: var(--space-32) 0;
}

::selection {
  background: var(--cedar-200);
  color: var(--sable-700);
}

/* ==========================================================================
   UTILITY CLASSES — decorative primitives used by UI kit
   ========================================================================== */
.stamp {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-stamp);
  text-transform: uppercase;
  color: var(--cedar-500);
  border: 1.5px solid var(--cedar-500);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}

.meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.rule-double {
  border: none;
  border-top: 3px double var(--cedar-500);
  height: 0;
}

.paper-texture {
  background-color: var(--paper);
  background-image:
    radial-gradient(rgba(58,42,30,0.035) 1px, transparent 1px),
    radial-gradient(rgba(58,42,30,0.025) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
}