/* ============================================================
   ДИЗАЙН-СИСТЕМА «СЕВЕРНАЯ ЛАЗУРЬ» (v2) — токен-слой
   Грузится ПОСЛЕ tailwind.css → переопределяет :root и компоненты.
   Источник: mockups/home-nordic-v2.html. Док: .tailwind-src/DESIGN-SYSTEM.md
   Переключается настройкой hz_design=nordic (по умолчанию classic не грузит этот файл).
   ============================================================ */

:root{
  /* --- ЦВЕТ (те же имена переменных, что и в классике → всё реколорится) --- */
  --limestone:213 33% 95%;      /* фон */
  --surface:0 0% 100%;          /* карточки/панели */
  --surface-2:213 45% 97%;      /* второстепенные поверхности */
  --ink:214 34% 12%;            /* основной текст */
  --graphite:213 39% 9%;        /* тёмные блоки, primary-фон */
  --soft:210 15% 42%;           /* приглушённый текст */
  --patina:218 68% 48%;         /* БРЕНД/CTA = азур (было teal) */
  --patina-soft:217 83% 95%;    /* азур-тинт */
  --gold:20 53% 50%;            /* АКЦЕНТ = медь (было золото) */
  --gold-soft:22 70% 95%;       /* медь-тинт */
  --line:214 38% 92%;           /* рамки */
  --line-soft:213 33% 95%;      /* мягкие рамки/разделители */
  --muted-foreground:210 15% 42%;
  --ok:162 76% 30%;             /* НОВОЕ: успех/в продаже = зелёный */
  --ok-soft:162 45% 94%;

  /* производные шadcn-токены */
  --background:var(--limestone); --foreground:var(--ink);
  --card:var(--surface); --card-foreground:var(--ink);
  --primary:var(--patina); --primary-foreground:0 0% 100%;
  --secondary:var(--surface-2); --secondary-foreground:var(--ink);
  --muted:var(--surface-2);
  --accent:var(--gold); --accent-foreground:0 0% 100%;
  --border:var(--line); --input:var(--line); --ring:var(--patina);

  /* --- РАДИУСЫ (было 0) --- */
  --radius:12px;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;

  /* --- ТЕНИ (было none) --- */
  --shadow-1:0 1px 2px rgba(20,29,41,.06), 0 2px 8px rgba(20,29,41,.05);
  --shadow-2:0 4px 14px rgba(20,29,41,.08), 0 12px 32px rgba(20,29,41,.07);
  --shadow-hover:0 10px 30px rgba(31,86,186,.16);

  /* --- ШКАЛА ОТСТУПОВ (4-базовая) --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s14:56px; --s20:80px;

  /* --- ТИПОГРАФИКА: дисплей-шрифт теперь Inter (было Cormorant) --- */
  --font-display:'Inter', system-ui, -apple-system, sans-serif;
  --font-body:'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
}

/* ── Дисплей-заголовки: сан-сериф вместо серифа ── */
.sh-display{font-family:var(--font-display) !important;font-weight:800;letter-spacing:-.022em}

/* ── Скругления и глубина на карточках/панелях ── */
.sh-card,.sh-panel{border-radius:var(--r-lg);box-shadow:var(--shadow-1);border-color:hsl(var(--line-soft))}
.sh-card-hover{transition:transform .18s, box-shadow .18s, border-color .18s}
.sh-card-hover:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:transparent}

/* ── Кнопки: пилюли ── */
.sh-btn{border-radius:var(--r-pill)}
.sh-btn-ink{background:hsl(var(--graphite))}
.sh-btn-ink:hover{filter:none;background:hsl(214 39% 15%)}
.sh-btn-patina:hover{filter:none;background:hsl(218 68% 42%)}
.sh-btn-link{border-bottom:0;color:hsl(var(--patina));font-family:var(--font-body);text-transform:none;letter-spacing:normal;font-weight:600;font-size:14.5px;gap:5px}

/* ── Чипы/бейджи: пилюли ── */
.sh-chip{border-radius:var(--r-pill);font-family:var(--font-body);text-transform:none;letter-spacing:normal;font-weight:500;font-size:13.5px}
.sh-chip-on{background:hsl(var(--patina));border-color:hsl(var(--patina))}
.sh-badge{border-radius:var(--r-pill);font-family:var(--font-body);text-transform:none;letter-spacing:.01em;font-weight:600;font-size:12px;padding:5px 11px}
.sh-badge-ok{background:hsl(var(--ok))}
.sh-tag{border-radius:var(--r-pill);font-family:var(--font-body);text-transform:none;letter-spacing:normal}

/* ── Инпуты: рамка + скругление вместо подчёркивания ── */
.sh-input{border:1px solid hsl(var(--line));border-radius:var(--r-md);background:hsl(var(--surface-2));padding:11px 14px}
.sh-input:focus{border-color:hsl(var(--patina));background:#fff;box-shadow:0 0 0 4px hsl(var(--patina-soft))}
.sh-label{font-family:var(--font-body);text-transform:none;letter-spacing:.005em;font-weight:600;font-size:12px;color:hsl(var(--muted-foreground))}
.sh-kicker{font-family:var(--font-body);text-transform:none;letter-spacing:.01em;font-weight:600;font-size:13px;color:hsl(var(--muted-foreground))}
.sh-rule{background:hsl(var(--line))}

/* ── ШАПКА (.mh-*) ── */
.mh-logo{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em}
.mh-field{border-radius:var(--r-pill);background:hsl(var(--surface-2))}
.mh-field:focus-within{box-shadow:0 0 0 4px hsl(var(--patina-soft))}
.mh-find{border-radius:var(--r-pill)}
.mh-ghost{border-radius:var(--r-pill);background:hsl(var(--ink));color:#fff;border:0}
.mh-ghost:hover{background:hsl(var(--graphite))}
.mh-cnt{background:hsl(var(--patina))}
.mh-nav a.on{box-shadow:inset 0 -2px 0 hsl(var(--patina))}

/* ── ЛИД-модалка + бургер-drawer ── */
#hz-lead h3,#hz-lead .done .big,#hz-lead .ph-num{font-family:var(--font-display) !important;font-weight:700}
#hz-lead .panel,#mh-drawer .panel{border-radius:var(--r-lg)}
#hz-lead input,#hz-lead textarea,#hz-lead select{border-radius:var(--r-md)}
#hz-lead .submit,#hz-lead button[type=submit]{border-radius:var(--r-pill)}

/* ── Общий мягкий фон ── */
body{background:hsl(var(--background))}

/* ============================================================
   СКВОЗНОЕ СКРУГЛЕНИЕ по-страничных компонентов (страницы не задают radius → слой выигрывает)
   ============================================================ */

/* Скрим на фото-обложках карточек — читаемость заголовка на любом снимке */
.zthumb,.cxthumb,.card-photo,.acard .plan{position:relative}
.zthumb::after,.cxthumb::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;
  background:linear-gradient(transparent,rgba(9,17,28,.72));pointer-events:none;z-index:0}
.zthumb>*,.cxthumb>*{position:relative;z-index:1}

/* Карточки с фото — радиус + клип углов + тень + ховер */
.zcard,.acard,.fcard,.art,.scard,.simcard,.cxcard{
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-1);
  border:1px solid hsl(var(--line-soft));transition:transform .18s, box-shadow .18s, border-color .18s}
.zcard:hover,.acard:hover,.fcard:hover,.art:hover,.scard:hover,.simcard:hover,.cxcard:hover{
  transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:transparent}

/* Панели без фото — радиус + мягкая тень */
.prog,.calc,.passport,.side,.locpanel,.plan-box,.genplan,.doc,.step,.facts,.seo,.seo-bottom,
.lead,.lead-band,.rev,.devc,.rtile,.dchip,.fbar,.lfilters,.scroller,.stats,.saved-searches,
.hsearch,.prog-card,.mort .calc,.rtile:hover{border-radius:var(--r-lg)}
.prog,.rtile,.devc,.rev,.dchip,.fbar{box-shadow:var(--shadow-1);border-color:hsl(var(--line-soft))}
.rtile,.devc,.dchip{transition:transform .16s, box-shadow .16s, border-color .16s}
.rtile:hover,.devc:hover,.dchip:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);border-color:transparent}
.hsearch{border-radius:var(--r-xl);box-shadow:var(--shadow-2)}
.calc,.mort .calc{border-radius:var(--r-lg)}

/* Кнопки → пилюли */
.hbtn,.mh-find,.mh-ghost,.go,.apply,.more,.gt,.cbtn,.search-go,.btn-cat,.btn,
.btn-patina,.btn-outline,.btn-gold,.hero-cta,.lead button[type=submit],.lead .submit,
input[type=submit],button.submit{border-radius:var(--r-pill)}

/* Чипы/сегменты/табы → пилюли */
.chip,.qchip,.fopt,.ptype,.seg,.hp-seg,.htabs a,.seotags a,.tabbtn,.rchip,.fchip{border-radius:var(--r-pill)}
.seg,.hp-seg{overflow:hidden}

/* Спек-плитки/бейджи внутри карточек */
.spec,.zspecs .spec,.zspec,.tag,.pill{border-radius:var(--r-sm)}
.badge,.zbadges span,.rate-badge,.status-badge,.sold-badge{border-radius:var(--r-pill)}

/* Инпуты/селекты → рамка + скругление */
.hf,.field,.fbar select,.fbar input,.lfilters select,.lfilters input,
#hz-lead input,#hz-lead select,#hz-lead textarea,
input[type=text],input[type=number],input[type=tel],input[type=email],select,textarea{border-radius:var(--r-md)}

/* Аватары/кружки */
.who .av,.zfav,.act-wish,.act-cmp,.fdel,.cdel,.devmono{border-radius:var(--r-pill)}

/* Тёмные блоки (калькулятор, hero-панель) — глубина без хайрлайна */
.calc{box-shadow:var(--shadow-2)}

/* Заголовки-дисплеи: Inter потяжелее для крупных размеров.
   ВАЖНО: stylesheet.css задаёт h1..h6{color:#444} — на тёмных hero это ломает контраст,
   поэтому заголовки наследуют цвет секции (тёмный hero → светлый текст). */
h1,h2,h3{color:inherit}
h1{font-weight:700;letter-spacing:-.022em}
.hero h1,.zname,.stat .n,.statbar .n,.shead h2{letter-spacing:-.02em}