/* ──────────────────────────────────────────────────────────────
   Дикий Зруб ЕКО — design tokens and the whole type system
   THE ONLY FILE THAT MAY SET A FONT. site.css never touches
   font-family, weight, size, line-height, tracking or case;
   `python3 _build/lint_type.py` enforces that.

   Three families, six weights, eight styles:
     Geologica 800       — H1, H2
     Geologica 600       — H3, UI       (menu, cards, footer links, values)
     Manrope 400 / 700   — BODY, SMALL  (running text; 700 only for <b>)
     JetBrains Mono 500  — LABEL        (caps eyebrows, spec keys)
     JetBrains Mono 600  — CONTROL      (buttons, chips, phone)
   ────────────────────────────────────────────────────────────── */
:root {
  /* ── colour ────────────────────────────────────────────────
     dark surfaces */
  --void:    #0e1310;   /* page ground */
  --panel:   #141b16;   /* raised panel */
  --panel-2: #1a231c;   /* panel chrome: toolbars, footers */
  --line:    rgba(214, 227, 200, .11);
  --line-2:  rgba(214, 227, 200, .2);
  --text:    #e9efe4;   /* 14.9:1 on --void */
  --dim:     #a7b3a5;   /*  8.6:1 on --void */

  /* light surfaces */
  --paper:   #e7e9e0;
  --paper-2: #f2f3ec;
  --rule:    #ccd0c2;
  --ink:     #121813;   /* 15.4:1 on --paper */
  --ink-2:   #4b584c;   /*  6.1:1 on --paper */

  --amber:   #e8a33d;   /* the single accent — once per screen */
  --amber-2: #f5bc66;
  --amber-ink: #8a5a16; /* amber legible on a light ground */
  --spruce:  #cfe0bb;   /* drawing stroke on dark */

  /* ── families & weights ──────────────────────────────────── */
  --f-display: 'Geologica', 'Arial Narrow', Arial, sans-serif;
  --f-text:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --fw-heavy: 800;      /* Geologica: H1, H2 */
  --fw-semi:  600;      /* Geologica: H3, UI, LABEL */
  --fw-text:  400;      /* Manrope: BODY, SMALL */
  --fw-bold:  700;      /* Manrope: <b> inside text */
  --fw-mono:  500;      /* JetBrains Mono: LABEL */
  --fw-mono-b: 600;     /* JetBrains Mono: CONTROL */

  /* ── seven styles ──────────────────────────────────────────
     style   px @360  px @1440  family/weight   use
     h1      30.4     56.0      Geologica 800   one per page
     h2      25.6     40.0      Geologica 800   section heading
     h3      19.5     23.2      Geologica 600   sub-heading, stat, project code
     ui      16       16        Geologica 600   menu, phone, buttons, chips,
                                                cards, footer links, values
     body    17       17        Manrope 400     running text, lead
     small   15       15        Manrope 400     notes, card meta, room lists
     label   11       11        Mono 500        CAPS eyebrows, spec keys
     control 13       13        Mono 600        buttons, chips, phone       */
  --fs-h1:    clamp(1.9rem,  3.4vw + 0.85rem, 3.5rem);
  --fs-h2:    clamp(1.6rem,  2.1vw + 0.95rem, 2.5rem);
  --fs-h3:    clamp(1.22rem, 0.6vw + 1.1rem,  1.45rem);
  --fs-ui:    1rem;
  --fs-body:  1.0625rem;
  --fs-small: 0.9375rem;
  --fs-label: 0.6875rem;
  --fs-control: 0.8125rem;

  --lh-h1:    1.0;
  --lh-h2:    1.04;
  --lh-h3:    1.18;
  --lh-ui:    1.3;
  --lh-body:  1.6;
  --lh-small: 1.55;
  --lh-label: 1.4;
  --lh-control: 1.4;

  --ls-h1:    -0.03em;
  --ls-h2:    -0.025em;
  --ls-h3:    -0.015em;
  --ls-ui:    -0.005em;
  --ls-label: 0.1em;
  --ls-control: 0.04em;

  /* ── space & shape ─────────────────────────────────────────
     one 4px-based ramp; components pick a step, not a number */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  --gut: var(--s-5);
  --max: 1280px;
  --sp:  clamp(60px, 8vw, 116px);   /* section rhythm */
  --r:   10px;                      /* panel radius */
  --r-s: 6px;                       /* control radius */
}
@media (max-width: 640px) { :root { --gut: var(--s-4); } }

/* ──────────────────────────────────────────────────────────────
   WHO USES WHICH STYLE
   Each style is declared once. To restyle an element, move its
   selector to another list; never add a font property elsewhere.
   ────────────────────────────────────────────────────────────── */

/* BODY — Manrope 400 */
body, .t-body, .lede, .hero__lead, .prose p,
.sheet__row--wide .sheet__v, .field input, .field textarea {
  font-family: var(--f-text); font-weight: var(--fw-text);
  font-size: var(--fs-body); line-height: var(--lh-body);
  letter-spacing: normal; text-transform: none;
}

/* SMALL — Manrope 400 */
.t-small, .foot, .card__meta, .rooms li, .floor__a, .subnote, .formnote,
.formstatus, .variant-note, .sheet__sub, .rig__kind, .rig__rooms, .stage p,
.proj__cap, .proj__note, .proj__step-m, .cxc__p, .mapx__p {
  font-family: var(--f-text); font-weight: var(--fw-text);
  font-size: var(--fs-small); line-height: var(--lh-small);
  letter-spacing: normal; text-transform: none;
}

/* bold inside running text */
b, strong, .formstatus { font-weight: var(--fw-bold); }

/* H2 — Geologica 800, caps */
.t-h2, .display {
  font-family: var(--f-display); font-weight: var(--fw-heavy);
  font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2);
  text-transform: uppercase; text-wrap: balance;
}

/* H1 — Geologica 800, caps (after H2 so it wins on h1.display) */
.t-h1, h1.display {
  font-family: var(--f-display); font-weight: var(--fw-heavy);
  font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1);
  text-transform: uppercase; text-wrap: balance;
}

/* H3 — Geologica 600 */
.t-h3, h3.display, .rig__code, .strip b, .perk h3, .foot .brand,
.proj__fact b, .lb__x, .lb__nav, .gal__go, .cxc__big, .ask__x, .mapx__big {
  font-family: var(--f-display); font-weight: var(--fw-semi);
  font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3);
  text-transform: none; text-wrap: balance;
}

/* UI — Geologica 600: the menu face, used wherever a thing is
   named, pressed or counted */
.t-ui, .nav, .skip, .back, .svc__link,
.card__code, .card__area, .rig__spec dd, .spec__v, .sheet__name, .sheet__v,
.cx__v, .stage h3, .foot__row a, .foot__row span:first-child, .foot__n,
.foot__nav a, .proj__step .card__code {
  font-family: var(--f-display); font-weight: var(--fw-semi);
  font-size: var(--fs-ui); line-height: var(--lh-ui); letter-spacing: var(--ls-ui);
  text-transform: none;
}

/* CONTROL — JetBrains Mono 600: things you press, and the phone */
.t-control, .btn, .chip, .tag, .lang summary, .lang__menu a {
  font-family: var(--f-mono); font-weight: var(--fw-mono-b);
  font-size: var(--fs-control); line-height: var(--lh-control); letter-spacing: var(--ls-control);
  text-transform: none;
}

/* LABEL — JetBrains Mono 500, caps */
.t-label, .mono, .rig__spec dt, .strip span, .filters__label, .count,
.card__type, .spec__k, .floor__n, .sheet__k, .field > span, .cx__k,
.foot__col h4, .foot__bot > span, .stage::before, .proj__fact span, .card__tag,
.gal__count, .lang__menu a span, .shot__n, .shot__cat, .lb__n {
  font-family: var(--f-mono); font-weight: var(--fw-mono);
  font-size: var(--fs-label); line-height: var(--lh-label); letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* NUMERAL — Geologica 800, a huge outlined figure behind a headline */
.cat-big {
  font-family: var(--f-display); font-weight: var(--fw-heavy);
  font-size: clamp(120px, 18vw, 260px); line-height: 1; letter-spacing: -0.04em;
}

/* numbers that line up */
.card__meta, .card__area, .spec__v, .floor__a, .rig__spec dd,
.foot__n, .strip b, .proj__fact b { font-variant-numeric: tabular-nums; }

/* dimension figures inside the SVG plans: sized in drawing units */
.plan .dimtext {
  font-family: var(--f-mono); font-weight: var(--fw-mono);
  font-size: 11px; letter-spacing: 0.04em;
}