/* ============================================================
   Эталон — дизайн-система v4
   Тёплый канвас + многоцветная архитектурная палитра.
   Каждая секция получает свой подтон. Цвета в одной светлоте —
   сочетаются между собой и не дерутся.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ====== CORE ====== */
  --c-paper:      #F4F2EE;      /* canvas — warm off-white */
  --c-paper-2:    #ECE9E2;      /* alt warm */
  --c-snow:       #FFFFFF;
  --c-ink:        #15171A;      /* text + dark sections */
  --c-ink-2:      #2A2D33;
  --c-graphite:   #4A4D54;
  --c-smoke:      #6E7178;
  --c-fog:        #A8ABB2;
  --c-mist:       #DCDDE0;

  /* ====== ACCENT PALETTE — 4 цвета на одной светлоте ====== */
  --c-ember:      #FF5A1F;      /* закатный оранжевый — главный поп */
  --c-ember-soft: #FFE3D3;      /* фон секции */
  --c-ember-deep: #C53D0F;      /* hover */

  --c-teal:       #0D5C63;      /* глубокий бирюзовый */
  --c-teal-soft:  #CFE6E5;      /* фон секции */
  --c-teal-deep:  #08454A;

  --c-bolt:       #F2FF45;      /* лимонный — для подложек, цифр */
  --c-bolt-soft:  #F8FFC2;
  --c-bolt-deep:  #DAE83A;

  --c-mauve:      #B86BD9;      /* мягкий сиренево-розовый */
  --c-mauve-soft: #F4DDFF;
  --c-mauve-deep: #8C46AC;

  /* Original brand azure — секторный, для тегов «стройка/ИЖС» */
  --c-azure:      #009FE3;
  --c-azure-soft: #BACCEB;

  /* Semantic */
  --c-good:       #2ECF6F;
  --c-warn:       #FF9D2E;
  --c-bad:        #FF4B4B;

  /* ====== TYPOGRAPHY ====== */
  --ff-display: "Unbounded", "Manrope", system-ui, sans-serif;
  --ff-body:    "Inter", system-ui, -apple-system, sans-serif;
  --ff-mono:    "JetBrains Mono", ui-monospace, monospace;
  --fw-r: 400; --fw-m: 500; --fw-sb: 600; --fw-b: 700; --fw-eb: 800;

  --fs-d1:    96px; --lh-d1: 1.0;  --ls-d1: -0.035em;
  --fs-d2:    72px; --lh-d2: 1.02; --ls-d2: -0.03em;
  --fs-h1:    56px; --lh-h1: 1.05; --ls-h1: -0.025em;
  --fs-h2:    40px; --lh-h2: 1.1;  --ls-h2: -0.02em;
  --fs-h3:    28px; --lh-h3: 1.2;  --ls-h3: -0.015em;
  --fs-lead:  20px; --lh-lead: 1.45;
  --fs-body:  16px; --lh-body: 1.55;
  --fs-meta:  12px; --lh-meta: 1.4; --ls-meta: 0.04em;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;

  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --bw-1:1px; --bw-2:2px;

  --sh-sm: 0 1px 2px rgba(21,23,26,0.06), 0 4px 12px rgba(21,23,26,0.04);
  --sh-md: 0 8px 24px rgba(21,23,26,0.08);
  --sh-lg: 0 24px 60px rgba(21,23,26,0.12);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1:160ms; --dur-2:240ms; --dur-3:380ms;

  --container: 1280px;
  --gutter: 32px;
}

* { box-sizing: border-box; }
html, body { margin: 0; font-family: var(--ff-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-ink); background: var(--c-paper); -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4 { margin: 0; }
::selection { background: var(--c-ember); color: #fff; }
:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; border-radius: var(--r-sm); }