/* ==========================================================================
   10K for Nurses and Midwives — токены дизайн-системы
   Палитра снята с логотипа (глубокий хвойный контур, коралловый жест,
   янтарное солнце) и разведена тёплым песочным фоном, чтобы фирменные
   цвета не растворялись в подложке.
   ========================================================================== */

:root {
  /* --- цвет -------------------------------------------------------------- */
  --ink:        #0a2a30;   /* фирменный глубокий: контур логотипа */
  --ink-2:      #123f47;   /* на полтона светлее */
  --ink-3:      #2a545c;
  --ink-mute:   #5b747a;

  --sand:       #f7f1e7;   /* база страницы */
  --sand-2:     #fdfaf3;   /* приподнятые поверхности */
  --sand-3:     #eee3d0;   /* углублённые полосы */
  --sand-4:     #e2d3ba;   /* слоты, границы-заливки */

  --coral:      #f0562f;   /* главный акцент */
  --coral-2:    #ff7350;
  --coral-3:    #c33d1c;
  --coral-wash: #fde9e0;
  --coral-tint: #fbd3c5;

  --amber:      #ffb02e;   /* солнце из логотипа */
  --amber-2:    #d98b06;
  --amber-wash: #fff0d2;

  --rust:       #a03a22;   /* глубокий тёплый акцент */
  --sage:       #a8cfc0;   /* поддерживающий холодный */
  --sage-2:     #6ea795;
  --grape:      #43283d;   /* тёмная тёплая подложка */

  --line:       #0a2a3014;
  --line-2:     #0a2a3029;
  --line-3:     #0a2a3047;
  --line-inv:   #ffffff1f;

  /* --- шрифты ------------------------------------------------------------ */
  --f-display: "Unbounded", "Trebuchet MS", sans-serif;
  --f-text:    "GolosText", "Segoe UI", system-ui, sans-serif;
  --f-mono:    "JetBrainsMono", "Consolas", ui-monospace, monospace;

  /* резкая шкала: 360 → 1600 */
  --t-giant: clamp(2rem, 0.9rem + 4.8vw, 5.1rem);
  --t-h1:    clamp(1.72rem, 1rem + 3.1vw, 3.6rem);
  --t-h2:    clamp(1.42rem, 0.98rem + 1.9vw, 2.6rem);
  --t-h3:    clamp(1.06rem, 0.94rem + 0.6vw, 1.42rem);
  --t-lead:  clamp(1rem, 0.95rem + 0.4vw, 1.22rem);
  --t-body:  clamp(0.96rem, 0.94rem + 0.16vw, 1.05rem);
  --t-small: clamp(0.83rem, 0.81rem + 0.1vw, 0.9rem);
  --t-meta:  clamp(0.68rem, 0.66rem + 0.1vw, 0.75rem);

  /* --- каркас ------------------------------------------------------------ */
  --shell: 1360px;
  --gutter: clamp(1rem, 0.4rem + 2.7vw, 3.2rem);
  --band: clamp(3.2rem, 1.8rem + 5.6vw, 7.6rem);
  --gap: clamp(0.8rem, 0.4rem + 1.4vw, 1.8rem);

  /* --- форма ------------------------------------------------------------- */
  --r-1: 4px;
  --r-2: 10px;
  --r-3: 20px;
  --r-4: 34px;
  --r-pill: 100px;
  /* срез угла «по диагонали» — вместо скругления */
  --cut: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
  --cut-sm: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);

  --sh-1: 0 1px 0 var(--line), 0 10px 26px -20px #0a2a3066;
  --sh-2: 0 24px 50px -32px #0a2a3088, 0 2px 0 var(--line);
  --sh-3: 0 44px 80px -52px #0a2a30aa;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.14, 1, 0.28, 1);
  --ease-back: cubic-bezier(0.34, 1.4, 0.5, 1);

  --nav-h: 64px;

  /* штриховка-«стежок» */
  --stitch-h: repeating-linear-gradient(90deg, var(--line-3) 0 7px, transparent 7px 14px);
  --stitch-v: repeating-linear-gradient(180deg, var(--line-3) 0 7px, transparent 7px 14px);
  --grid-fine: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 34px),
               repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 34px);
}

html[lang="en"] {
  --sand:   #f5f1e9;
  --sand-2: #fdfbf7;
  --sand-3: #ebe4d7;
  --t-giant: clamp(1.95rem, 0.9rem + 4.4vw, 4.7rem);
}

/* фоновые «полосы» секций */
[data-skin="sand"]  { background: var(--sand); color: var(--ink); }
[data-skin="hi"]    { background: var(--sand-2); color: var(--ink); }
[data-skin="lo"]    { background: var(--sand-3); color: var(--ink); }
[data-skin="amber"] { background: var(--amber-wash); color: var(--ink); }
[data-skin="ink"]   { background: var(--ink); color: var(--sand-2); }
[data-skin="grape"] { background: var(--grape); color: var(--sand-2); }
[data-skin="coral-solid"] { background: var(--coral); color: #fff; }