/* ==========================================================================
   it-format — Design Tokens (V03 Editorial)
   Single source of truth. Import FIRST, before style.css / engine.css.
   ========================================================================== */

:root {
  /* -------------------- COLOR -------------------- */
  --color-ink:            #1a1814;
  --color-ink-soft:       #3d3932;
  --color-ink-mute:       #6b6559;
  --color-ink-faint:      #9a9284;

  --color-paper:          #f4efe5;
  --color-paper-raised:   #f9f4e8;
  --color-paper-sunk:     #ebe5d7;
  --color-paper-rule:     #d8d2c5;

  --color-accent:         #c2410c;
  --color-accent-bright:  #f97316;

  --color-inverted-bg:    #1a1814;
  --color-inverted-fg:    #f4efe5;
  --color-inverted-mute:  #a49a87;

  --color-success:        #15803d;
  --color-danger:         #b91c1c;

  /* -------------------- TYPOGRAPHY ---------------- */
  --font-serif:       "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-ornament:    "Fraunces", "Source Serif 4", Georgia, serif;
  --font-mono:        "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-sans:        "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --type-display:     88px;
  --type-display-sm:  56px;
  --type-h1:          48px;
  --type-h2:          32px;
  --type-h3:          24px;
  --type-h4:          20px;
  --type-body-lg:     17px;
  --type-body:        15px;
  --type-body-sm:     14px;
  --type-meta:        13px;
  --type-micro:       11px;
  --type-micro-xs:    10px;

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  --lh-display:       0.92;
  --lh-heading:       1.0;
  --lh-snug:          1.2;
  --lh-body:          1.5;
  --lh-loose:         1.55;

  --track-display:    -0.025em;
  --track-tight:      -0.02em;
  --track-normal:     0em;
  --track-wide:       0.05em;
  --track-wider:      0.08em;
  --track-widest:     0.14em;

  /* -------------------- SPACING ------------------- */
  --space-1:    4px;   --space-2:    8px;   --space-3:    12px;
  --space-4:    16px;  --space-5:    20px;  --space-6:    24px;
  --space-7:    28px;  --space-8:    32px;  --space-10:   40px;
  --space-12:   48px;  --space-16:   64px;  --space-20:   80px;
  --space-24:   96px;

  --container-max:      1440px;
  --container-narrow:   1180px;
  --container-reading:  68ch;

  --col-side-l:   220px;
  --col-side-r:   280px;

  /* -------------------- BORDERS ------------------- */
  --border-w:      1px;
  --border-w-2:    2px;
  --border-color:  var(--color-ink);
  --border-soft:   var(--color-paper-rule);

  --radius-0:      0;
  --radius-1:      3px;
  --radius-2:      6px;
  --radius-pill:   999px;
  --radius-round:  50%;

  /* -------------------- MOTION -------------------- */
  --ease-out-quart: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:       150ms;
  --dur-base:       250ms;
  --dur-slow:       400ms;
  --dur-bloom:      1400ms;

  --z-base:     0;
  --z-header:   50;
  --z-overlay:  90;
  --z-modal:    100;
  --z-toast:    200;
}

/* ==========================================================================
   Fonts — self-hosted (GDPR-safe, швидший first paint).
   Поклади .woff2 у /templates/it-format/fonts/. Файли НЕ входять у базовий
   пакет — їх треба або завантажити скриптом (див. README → Installation),
   або залишити fallback на system-serif до ручного завантаження.
   ========================================================================== */

@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/SourceSerif4-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/SourceSerif4-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/SourceSerif4-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/Fraunces-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}