/* Gen Vagula · Märkmik — design tokens
   Source of truth: the Märkmik CVI design system. Do not edit values here
   without updating the CVI. Version 2, 1 November 2026. */

:root {
  /* Surfaces */
  --paper: #F4EEE3;          /* page background; header, footer, most blocks */
  --paper-raised: #FBF8F2;   /* input fields on paper */
  --sand-200: #EADFCB;       /* Praegu panel, Koostöö section */
  --sand-300: #D9C7AA;       /* portrait placeholder */
  --sand-line: #C9B691;      /* rules on sand */
  --sand-label: #6A5A42;     /* uppercase labels on sand (4.9:1 on sand-200) */
  --line: #CDBFA9;           /* hairlines on paper */

  /* Navy */
  --navy-800: #162B43;       /* ink, buttons, list rule, Series frame, the one navy block */
  --navy-600: #2A5784;       /* link hover, active state, focus ring */
  --navy-line: #4A6582;      /* rules on navy */
  --navy-200: #C2CCD6;       /* descriptions and meta on navy */
  --sand-on-navy: #D7C3A3;   /* numbers and labels on navy */

  /* Text on paper */
  --ink: var(--navy-800);    /* headings and body */
  --ink-body: #3E4F60;       /* lead paragraphs, longer body copy */
  --ink-muted: #5B6976;      /* dates, reading time, article numbers */

  /* Accent */
  --bronze: #A9804F;         /* wordmark full stop only */
  --bronze-text: #8A6A3E;    /* small accent labels on paper ("Sari · käib") */

  /* Type families */
  --font-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-sans: "Instrument Sans", -apple-system, "Segoe UI", system-ui, sans-serif;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 56px;
  --space-7: 72px;
  --space-8: 80px;

  /* Radius */
  --radius-none: 0;
  --radius-full: 9999px;     /* portrait only */

  /* Stroke */
  --stroke-hairline: 1px;

  /* Layout */
  --width-page: 1200px;
  --width-read: 680px;
}

/* Type styles. Serif styles are always weight 400; emphasis is italic. */
.display  { font-family: var(--font-serif); font-weight: 400; font-size: clamp(48px, 6.4vw, 92px); line-height: 1.02; letter-spacing: -0.035em; }
.h1       { font-family: var(--font-serif); font-weight: 400; font-size: clamp(40px, 4.5vw, 56px); line-height: 1.06; letter-spacing: -0.03em; }
.h2       { font-family: var(--font-serif); font-weight: 400; font-size: clamp(34px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -0.02em; }
.h3       { font-family: var(--font-serif); font-weight: 400; font-size: clamp(24px, 2.4vw, 28px); line-height: 1.2; }
.lead     { font-family: var(--font-serif); font-weight: 400; font-size: clamp(20px, 2vw, 23px); line-height: 1.5; color: var(--ink-body); }
.article  { font-family: var(--font-serif); font-weight: 400; font-size: clamp(19px, 1.6vw, 20px); line-height: 1.75; max-width: var(--width-read); }
.accent-italic { font-family: var(--font-serif); font-weight: 400; font-style: italic; font-size: 28px; line-height: 1.2; }
.body     { font-family: var(--font-sans); font-weight: 400; font-size: 17px; line-height: 1.6; }
.ui       { font-family: var(--font-sans); font-weight: 500; font-size: 15px; line-height: 1.4; }
.meta     { font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
.label    { font-family: var(--font-sans); font-weight: 600; font-size: 13px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; }

/* Focus */
:focus-visible { outline: 2px solid var(--navy-600); outline-offset: 3px; }

/* Measures from the CVI component pages and the build memo.
   Named so page CSS can refer to them without raw values. */
:root {
  --size-wordmark: 23px;
  --size-hit: 48px;
  --stroke-quote: 2px;
  --col-nr: 3.5rem;
  --track-wordmark: -0.02em;
  --gutter: var(--space-5);
}