/* .znode — токены дизайн-системы. Тёмная тема по умолчанию, .zn-light — светлая. */

@font-face {
  font-family: "Nordwand Mono";
  src: url("./fonts/NordwandMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nordwand Mono";
  src: url("./fonts/NordwandMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nordwand Mono";
  src: url("./fonts/NordwandMono-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nordwand Mono";
  src: url("./fonts/NordwandMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Типографика: Nordwand Mono self-host (fonts/), без CDN */
  --zn-font-sans: "Nordwand Mono", ui-monospace, monospace;
  --zn-font-mono: "Nordwand Mono", ui-monospace, monospace;

  --zn-text-xs:   0.8125rem; /* 13 — подписи, бейджи */
  --zn-text-sm:   0.875rem;  /* 14 */
  --zn-text-base: 0.9375rem; /* 15 — интерфейс */
  --zn-text-md:   1rem;      /* 16 — основной текст */
  --zn-text-lg:   1.0625rem; /* 17 — вводный абзац */
  --zn-text-xl:   1.125rem;  /* 18 */
  --zn-text-2xl:  1.25rem;   /* 20 — заголовок карточки */
  --zn-text-3xl:  1.5rem;    /* 24 — заголовок раздела */
  --zn-text-4xl:  2rem;      /* 32 */
  --zn-text-hero: clamp(2.5rem, 8vw, 4rem);

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

  --zn-leading-tight: 1.2;
  --zn-leading-snug:  1.5;
  --zn-leading-base:  1.6;

  --zn-tracking-tight: -0.02em;
  --zn-tracking-label: 0.1em;

  /* Отступы: база 4px, шкала в rem как на сайте */
  --zn-space-xs:  0.25rem;
  --zn-space-sm:  0.5rem;
  --zn-space-md:  1rem;
  --zn-space-lg:  1.5rem;
  --zn-space-xl:  2rem;
  --zn-space-2xl: 3rem;
  --zn-space-3xl: 4rem;

  --zn-radius-sm:   6px;
  --zn-radius-md:   8px;
  --zn-radius-lg:   12px;
  --zn-radius-pill: 999px;

  /* Цвет — тёмная тема */
  --zn-bg:            #0f1216;
  --zn-bg-2:          #14181e;
  --zn-surface:       #1a1e26;
  --zn-surface-2:     #22262f;
  --zn-surface-3:     #2a2f39;
  --zn-line:          #2d323b;
  --zn-line-2:        #3c424d;
  --zn-ink:           #e6e9ef;
  --zn-ink-2:         #aeb3bd;
  --zn-ink-3:         #8b909a;

  --zn-accent:        #7ec8a3;
  --zn-accent-ink:    #0f1216;
  --zn-accent-soft:   rgba(126, 200, 163, 0.14);
  --zn-accent-50:     #16241d;
  --zn-accent-100:    #cfe8dc;
  --zn-accent-300:    #a3dcc0;
  --zn-accent-500:    #7ec8a3;
  --zn-accent-600:    #5a9a7a;
  --zn-accent-700:    #3f6f58;
  --zn-accent-900:    #1b2b23;

  --zn-steel:         #7f94a8; /* нейтральная серия на графиках */
  --zn-sand:          #c9a26d; /* четвёртая серия на графиках */

  --zn-ok:            #6bb894;
  --zn-warn:          #d6a860;
  --zn-danger:        #dd8178;

  --zn-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --zn-shadow-2: 0 6px 20px -8px rgba(0, 0, 0, 0.5);
  --zn-shadow-3: 0 18px 48px -16px rgba(0, 0, 0, 0.6);
  --zn-focus:    0 0 0 1px rgba(126, 200, 163, 0.55);

  /* Движение */
  --zn-dur-fast:     120ms;
  --zn-dur-base:     200ms;
  --zn-dur-screen:   240ms;
  --zn-dur-sheet:    280ms;
  --zn-dur-tv-focus: 160ms;
  --zn-ease:         ease;

  /* Раскладки */
  --zn-container:      960px;
  --zn-container-wide: 1180px;
  --zn-sidebar:        248px;
  --zn-sidebar-tablet: 200px;
  --zn-row-height:     52px;
  --zn-control-height: 44px;
  --zn-control-mobile: 56px;
  --zn-tap-min:        48px;

  /* SmartTV */
  --zn-tv-width:       1920px;
  --zn-tv-height:      1080px;
  --zn-tv-safe-x:      96px;
  --zn-tv-safe-y:      54px;
  --zn-tv-card-w:      400px;
  --zn-tv-card-h:      225px;
  --zn-tv-gap:         24px;
  --zn-tv-row-gap:     48px;
  --zn-tv-text-min:    24px;
  --zn-tv-focus-ring:  4px;
  --zn-tv-focus-offset: 6px;

  /* Иконки */
  --zn-icon-grid:   24;
  --zn-icon-stroke: 1.75;
}

.zn-light {
  --zn-bg:          #f7f8fa;
  --zn-bg-2:        #ffffff;
  --zn-surface:     #ffffff;
  --zn-surface-2:   #f0f2f5;
  --zn-surface-3:   #e6e9ee;
  --zn-line:        #dde1e7;
  --zn-line-2:      #c3c9d2;
  --zn-ink:         #0f1216;
  --zn-ink-2:       #4a4f58;
  --zn-ink-3:       #676c75;

  --zn-accent:      #2f7d5b;
  --zn-accent-ink:  #ffffff;
  --zn-accent-soft: rgba(47, 125, 91, 0.12);
  --zn-accent-50:   #eaf3ee;
  --zn-accent-100:  #dcefe5;
  --zn-accent-300:  #2f7d5b;
  --zn-accent-500:  #2f7d5b;
  --zn-accent-600:  #24614a;
  --zn-accent-700:  #1c4d3a;
  --zn-accent-900:  #14181e;

  --zn-steel:       #5a6b7d;
  --zn-sand:        #8a6a3c;

  --zn-ok:          #1f7a54;
  --zn-warn:        #7d5a10;
  --zn-danger:      #b3312f;

  --zn-shadow-1: 0 1px 2px rgba(15, 18, 22, 0.06);
  --zn-shadow-2: 0 6px 20px -10px rgba(15, 18, 22, 0.12);
  --zn-shadow-3: 0 18px 48px -20px rgba(15, 18, 22, 0.16);
  --zn-focus:    0 0 0 1px rgba(47, 125, 91, 0.55);
}