/* ───────────────────────────────────────────────────────────
   НЕЧТО — Design Tokens
   Personal brand of a Russian product/management trainer.
   The system is dark-first, type-driven, with geometric
   "cool shapes" as the signature visual motif.
   ─────────────────────────────────────────────────────────── */

:root {
  /* ── Neutrals — black-and-paper foundation ─────────────── */
  --n-ink:        #1A1A1A;   /* primary background */
  --n-ink-soft:   #202020;   /* card on ink */
  --n-ink-soft2:  #292929;   /* hairline elevated */
  --n-graphite:   #3D3D3D;
  --n-iron:       #686868;
  --n-stone:      #868686;
  --n-mist:       #BABABA;
  --n-paper:      #D9D9D9;
  --n-bone:       #F5F5F5;
  --n-paper-soft: #FBFBFB;
  --n-white:      #FFFFFF;

  /* ── Olive — the warm earth accent ─────────────────────── */
  --o-moss:       #686F4D;   /* signature olive */
  --o-moss-deep:  #4C5131;
  --o-sage:       #D5D9C2;   /* mineral light */
  --o-sage-text:  #CAD5A1;

  /* ── Signal — single shot of bright life ───────────────── */
  --s-mint:       #63C57F;   /* "go", confirms, accents */
  --s-mint-deep:  #2E8347;

  /* ── Atmospheric — supporting cast ─────────────────────── */
  --a-clay:       #6D5E5A;   /* warm rock */
  --a-fog:        #EEF3FF;   /* cold halo */
  --a-pebble:     #F2F5F6;

  /* ── Glass — semi-transparent surfaces ────────────────── */
  --glass-light:    rgba(255,255,255,0.10);
  --glass-light-2:  rgba(255,255,255,0.04);
  --glass-light-3:  rgba(255,255,255,0.18);
  --glass-stroke:   rgba(255,255,255,0.14);
  --glass-stroke-2: rgba(255,255,255,0.06);
  --glass-shadow:   rgba(0,0,0,0.47);
  --glass-paper:    rgba(217,217,217,0.30);

  /* ── Type ─────────────────────────────────────────────── */
  --font-display:  "Benzin", "Inter Tight", "Arial Narrow", sans-serif;
  --font-body:     "Inter Tight", "Inter", system-ui, sans-serif;
  --font-mono:     "Inter Tight", ui-monospace, monospace;

  /* Display scale — tuned for 1920×1080 stages */
  --t-mega:    154px;   /* hero word ("Трекер") */
  --t-display: 96px;
  --t-h1:      74px;
  --t-h2:      64px;
  --t-h3:      48px;
  --t-h4:      36px;
  --t-h5:      28px;

  /* Body scale */
  --t-lead:    28px;
  --t-body:    22px;
  --t-meta:    18px;
  --t-eyebrow: 14px;

  /* Tracking */
  --tr-tight:  -0.020em;
  --tr-snug:   -0.010em;
  --tr-wide:    0.080em;

  /* Leading */
  --lh-poster:  0.92;
  --lh-display: 1.00;
  --lh-tight:   1.10;
  --lh-body:    1.18;
  --lh-loose:   1.40;

  /* ── Radius ───────────────────────────────────────────── */
  --r-xs: 12px;
  --r-sm: 20px;
  --r-md: 32px;
  --r-lg: 44px;
  --r-xl: 54px;
  --r-pill: 999px;

  /* ── Spacing — 8pt scale ──────────────────────────────── */
  --s-1:  8px;
  --s-2:  16px;
  --s-3:  24px;
  --s-4:  32px;
  --s-5:  44px;
  --s-6:  64px;
  --s-7:  82px;
  --s-8:  106px;

  /* ── Elevation ────────────────────────────────────────── */
  --sh-card:  0 4px 4px rgba(0,0,0,0.22);
  --sh-pop:   0 24px 60px rgba(0,0,0,0.45);
  --sh-glow:  0 0 120px rgba(99,197,127,0.20);

  /* ── Stage ────────────────────────────────────────────── */
  --stage-w: 1920px;
  --stage-h: 1080px;
  --gutter:  88px;
}

/* ── Reset & base ──────────────────────────────────────── */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: #0E0E0E;
  color: var(--n-paper-soft);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

/* ── Display Type Helpers ──────────────────────────────── */
.t-mega    { font-family: var(--font-display); font-size: var(--t-mega);    line-height: var(--lh-poster);  letter-spacing: var(--tr-tight); font-weight: 500; }
.t-display { font-family: var(--font-display); font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--tr-tight); font-weight: 500; }
.t-h1      { font-family: var(--font-display); font-size: var(--t-h1);      line-height: var(--lh-display); letter-spacing: var(--tr-tight); font-weight: 500; }
.t-h2      { font-family: var(--font-display); font-size: var(--t-h2);      line-height: var(--lh-display); letter-spacing: var(--tr-tight); font-weight: 500; }
.t-h3      { font-family: var(--font-display); font-size: var(--t-h3);      line-height: var(--lh-display); letter-spacing: var(--tr-tight); font-weight: 500; }
.t-h4      { font-family: var(--font-display); font-size: var(--t-h4);      line-height: var(--lh-display); letter-spacing: var(--tr-tight); font-weight: 500; }
.t-h5      { font-family: var(--font-display); font-size: var(--t-h5);      line-height: var(--lh-display); letter-spacing: var(--tr-tight); font-weight: 500; }

.t-lead    { font-family: var(--font-body); font-size: var(--t-lead); line-height: var(--lh-tight); font-weight: 500; }
.t-body    { font-family: var(--font-body); font-size: var(--t-body); line-height: var(--lh-body); }
.t-meta    { font-family: var(--font-body); font-size: var(--t-meta); line-height: var(--lh-body); color: var(--n-mist); }
.t-eyebrow { font-family: var(--font-body); font-size: var(--t-eyebrow); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--n-stone); font-weight: 600; }

.t-mono    { font-family: var(--font-mono); font-feature-settings: "tnum"; }

/* italics — use very sparingly, for editorial flourish */
em.flourish { font-family: "Inter Tight", serif; font-style: italic; font-weight: 300; color: var(--o-sage-text); }
</content>