/* ============================================================================
   HEAD Design System — tokens
   Colours and typography as CSS custom properties.
   Import this first; every other stylesheet expects these vars to exist.

   Source: Aalto-style editorial system, retuned for HEAD (head.uz),
   an AI consultancy in Kokand, Uzbekistan. Navy-led, warm-paper neutrals,
   Inter (primary) + Helvena (web headers only), single-accent-per-surface,
   flat surfaces, hard edges.

   Type stack rationale. Inter is the workhorse — it covers Latin, Cyrillic
   (Uzbek Latin + Uzbek Cyrillic + Russian), all UI sizes and all PDF output.
   Helvena gives display headers character on the web, and the browser's
   per-character font fallback substitutes Inter for any glyph Helvena lacks
   (notably Cyrillic) automatically. Body copy is always Inter.
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Besley:ital,wght@0,400;0,700;1,400&family=Source+Code+Pro:wght@400;600&display=swap");

/* ----- Primary sans: Inter (variable, self-hosted) -------------------- */
/* Covers body, prose, UI, all Cyrillic, and any header that needs full   */
/* glyph coverage. This is the workhorse.                                  */
@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable.ttf") format("truetype-variations"),
       url("fonts/InterVariable.ttf") format("truetype");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable-Italic.ttf") format("truetype-variations"),
       url("fonts/InterVariable-Italic.ttf") format("truetype");
  font-weight: 100 900; font-style: italic; font-display: swap;
}

/* ----- Display sans: Helvena (web headers only) ----------------------- */
/* Reserved for h1, h2, h3, .display, and the wordmark on the web.        */
/* No Cyrillic support — browsers fall back to Inter per-glyph.           */
@font-face {
  font-family: "Helvena";
  src: url("fonts/Helvena-Extralight.ttf") format("truetype");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Helvena";
  src: url("fonts/Helvena-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Helvena";
  src: url("fonts/Helvena-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Helvena";
  src: url("fonts/Helvena-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Helvena";
  src: url("fonts/Helvena-Semibold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Helvena";
  src: url("fonts/Helvena-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Helvena";
  src: url("fonts/Helvena-Extrabold.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Helvena";
  src: url("fonts/Helvena-Black.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  /* ----- Brand (primary) palette — navy-led --------------------------- */
  --navy:         #1B3A6B;   /* the accent */
  --navy-deep:    #0E2244;   /* hover / pressed / dense fills */
  --navy-soft:    #E6ECF4;   /* tinted surfaces, callouts */

  /* ----- Secondary accents — used sparingly, one at a time ------------ */
  --steel:        #3E5C76;   /* data viz, charts, secondary heads */
  --slate-teal:   #4F7A7A;   /* tags, secondary data series */
  --tan:          #A78B5F;   /* the only warm note — emphasis, pull-quotes */

  /* ----- Category palette — one per category, never mixed ------------- */
  /* For data viz and category coding. All desaturated, all support navy. */
  --cat-1: #1B3A6B;   /* navy */
  --cat-2: #3E5C76;   /* steel */
  --cat-3: #4F7A7A;   /* slate teal */
  --cat-4: #A78B5F;   /* tan */
  --cat-5: #5A6B82;   /* dusk */
  --cat-6: #7A6B82;   /* mauve */

  /* ----- Supportive / neutral — warm paper, not cold grey ------------- */
  --white:      #FFFFFF;
  --black:      #000000;
  --ink:        #0B1B2B;   /* body text — near-black with navy undertone */
  --ink-muted:  #4A5868;   /* secondary text */
  --paper:      #FAF8F4;   /* warm off-white page background */
  --surface:    #F1EEE7;   /* card fills */
  --hairline:   #D9D3C7;   /* dividers, warm */

  /* ----- Semantic foreground / background ---------------------------- */
  --fg-1: var(--ink);
  --fg-2: var(--ink-muted);
  --fg-inverse: var(--white);
  --bg-page: var(--paper);
  --bg-card: var(--surface);
  --bg-dark: var(--navy-deep);
  --accent:    var(--navy);         /* single accent per surface */
  --accent-fg: var(--white);         /* white on navy clears AAA */

  /* ----- Type stack --------------------------------------------------- */
  /* Inter is primary. Use --font-sans for everything except web headers. */
  /* --font-display = Helvena → Inter; per-glyph fallback handles Cyrillic. */
  /* For PDF or any all-Cyrillic surface, override --font-display to Inter. */
  --font-sans:    "Inter", Arial, sans-serif;
  --font-display: "Helvena", "Inter", Arial, sans-serif;
  --font-serif:   "Besley", Georgia, serif;
  --font-mono:    "Source Code Pro", ui-monospace, Menlo, monospace;

  /* ----- Type scale (desktop) ---------------------------------------- */
  /* 7-step scale */
  --fs-1: 14px;  --lh-1: 16px;
  --fs-2: 16px;  --lh-2: 24px;
  --fs-3: 18px;  --lh-3: 28px;   /* body default */
  --fs-4: 22px;  --lh-4: 30px;
  --fs-5: 28px;  --lh-5: 36px;   /* H3 desktop */
  --fs-6: 40px;  --lh-6: 48px;   /* H2 desktop */
  --fs-7: 64px;  --lh-7: 72px;   /* H1 desktop */

  /* ----- Letter spacing ---------------------------------------------- */
  --ls-tight:    -2px;   /* H1 */
  --ls-display:  -1px;   /* H2 */
  --ls-body:      0px;

  /* ----- Paragraph spacing ------------------------------------------- */
  --ps-1:  8px;
  --ps-2: 12px;
  --ps-3: 16px;
  --ps-4: 24px;
  --ps-5: 32px;
  --ps-6: 48px;

  /* ----- Layout ------------------------------------------------------- */
  --content-max: 1200px;
  --rail-width:  280px;

  /* ----- Radii — surfaces are essentially flat ----------------------- */
  --radius-0: 0;
  --radius-sm: 2px;
  --radius-pill: 999px;   /* pill buttons only */

  /* ----- Hairlines / borders ----------------------------------------- */
  --border-thin: 1px solid var(--hairline);
  --border-strong: 1px solid var(--black);

  /* ----- Motion (minimal) -------------------------------------------- */
  --motion-fast: 120ms ease-out;
  --motion-med:  180ms ease-out;
}

/* ============================================================================
   Global resets + base
   ========================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-3);
  line-height: var(--lh-3);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================================
   Semantic type styles — HEAD rules baked in:
   - Sentence case only (no text-transform)
   - Left aligned, ragged right (no justification anywhere)
   - Max 3 sizes per surface (use h1 + h3 + p as the default triple)
   - Bold a person's name on first mention
   ========================================================================= */

.h1, h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-7);
  line-height: var(--lh-7);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0 0 var(--ps-4);
  text-wrap: balance;
}

.h2, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-6);
  line-height: var(--lh-6);
  letter-spacing: var(--ls-display);
  margin: 0 0 var(--ps-3);
}

.h3, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-5);
  line-height: var(--lh-5);
  letter-spacing: var(--ls-display);
  margin: 0 0 var(--ps-3);
}

.h4, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-4);
  line-height: var(--lh-4);
  margin: 0 0 var(--ps-2);
}

p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-3);
  line-height: var(--lh-3);
  color: var(--fg-1);
  margin: 0 0 var(--ps-3);
  max-width: 68ch;
  text-wrap: pretty;
}

.dek {
  font-size: var(--fs-4);
  line-height: var(--lh-4);
  color: var(--fg-1);
  max-width: 52ch;
}

.meta, .small {
  font-size: var(--fs-2);
  line-height: var(--lh-2);
  color: var(--fg-2);
}

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

.serif, .editorial {
  font-family: var(--font-serif);
}

/* Expressive display — short poster-like hits. Leading == font-size.    */
/* Display is the most opinionated header, so it stays on Helvena.       */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 96px;
  line-height: 96px;
  letter-spacing: -0.04em;  /* ~ tracking -50 */
  margin: 0;
}

/* Bold a person's name on first mention. */
.person {
  font-weight: 700;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover {
  text-decoration: none;
}

strong, b { font-weight: 700; }

/* ============================================================================
   Mobile caps — separate mobile type at H1–H3
   ========================================================================= */

@media (max-width: 720px) {
  .h1, h1 { font-size: 40px; line-height: 48px; letter-spacing: -1.25px; }
  .h2, h2 { font-size: 28px; line-height: 36px; }
  .h3, h3 { font-size: 22px; line-height: 30px; }
  .display { font-size: 56px; line-height: 56px; }
}