/* ==========================================================================
   ДЗЧ / Dubai Rating — дизайн-токены (S2, утверждено направление «плитки + обложки»)
   Правила применения — в Outline «S2 · Дизайн-система» и в design/README.md.
   Брейкпоинты (CSS-переменные в @media не работают, держим числа здесь):
     --bp-md: 720px   планшет и широкий телефон
     --bp-lg: 1040px  ноутбук и выше
   ========================================================================== */

/* ---------- шрифты ---------- */
@font-face{font-family:"TT Norms Pro";src:url(../fonts/TTNormsPro-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"TT Norms Pro";src:url(../fonts/TTNormsPro-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"TT Norms Pro";src:url(../fonts/TTNormsPro-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
/* Playfair Display Italic — переменный (400–900), три набора символов */
@font-face{font-family:"Playfair Display";src:url(../fonts/PlayfairDisplay-Italic-cyrillic.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Playfair Display";src:url(../fonts/PlayfairDisplay-Italic-latin-ext.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Playfair Display";src:url(../fonts/PlayfairDisplay-Italic-latin.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* ---------- палитра бренда (не меняются от темы) ---------- */
  --c-ink:#1D1D1B;          /* чёрный логотипа; единственный цвет текста на жёлтом и пастели */
  --c-white:#FFFFFF;
  --c-lemon:#FFFA80;        /* главный акцент */
  --c-lemon-soft:#FFFFAD;
  --c-grey:#E3E3E3;
  --c-sky:#C9E8FD;
  --c-lime:#E3FFC6;
  /* пастельные */
  --c-sky-soft:#EBF7FF;
  --c-paper:#F7F7F7;
  --c-cream:#FEFFDE;
  --c-peach:#FFE0B2;

  /* ---------- цвета разделов (плитки, точки, обложки разделов) ---------- */
  --sec-guide:var(--c-sky);         /* Справочная */
  --sec-read:var(--c-lime);         /* Читать */
  --sec-events:var(--c-peach);      /* Афиша */
  --sec-awards:var(--c-lemon);      /* Рейтинг */
  --sec-jobs:var(--c-sky-soft);     /* Вакансии */
  --sec-business:var(--c-peach);    /* Для бизнеса (на оранжевом mesh) */
  --sec-about:var(--c-cream);       /* О ДЗЧ */

  /* ---------- семантика: светлая тема ---------- */
  --bg:#F7F7F7;
  --surface:#FFFFFF;
  --surface-sunk:#EFEFEA;
  --ink:#1D1D1B;
  --muted:#5F5F57;          /* 6,1:1 на --bg */
  --line:#E3E3E3;
  --line-strong:#CFCFC6;
  --tile-ink:#1D1D1B;       /* текст на пастельных плитках в ОБЕИХ темах */
  --tile-muted:#45453F;     /* вторичный текст на пастели (≥7:1 на самой тёмной пастели) */
  --btn:#1D1D1B; --btn-ink:#FFFFFF;
  --accent:#FFFA80; --accent-ink:#1D1D1B;
  --field:#FFFFFF;
  --field-line:#8C8C83;     /* граница поля ввода, ≥3:1 к полю и фону (WCAG 1.4.11) */
  --focus:#1D1D1B;          /* кольцо фокуса */
  --focus-halo:#FFFA80;     /* подложка кольца: видно и на тёмных фото */
  --glyph:rgba(255,255,255,.62);   /* изгибы логотипа на обложке */
  --soon-line:#C4C4BC;
  --scrim:rgba(17,17,16,.72);      /* фон под галереей */
  --cover-bg:url(../img/brand/mesh-green.jpg) center/cover no-repeat, var(--c-cream);
  --cover-ink:#1D1D1B; --cover-muted:#45453F;

  /* ---------- типографика ---------- */
  --font-sans:"TT Norms Pro","Helvetica Neue",Arial,sans-serif;
  --font-accent:"Playfair Display",Georgia,"Times New Roman",serif;
  --fs-display:clamp(34px, 2.6vw + 24px, 60px);  /* H1 главной и обложек */
  --fs-h1:clamp(30px, 1.9vw + 22px, 48px);       /* H1 внутренних страниц */
  --fs-h2:clamp(26px, 1.7vw + 19px, 44px);       /* заголовок раздела */
  --fs-h3:clamp(19px, .4vw + 17px, 22px);        /* заголовок карточки */
  --fs-lead:clamp(16px, .3vw + 15px, 19px);
  --fs-body:16px;
  --fs-prose:clamp(16px, .2vw + 15.5px, 18px);   /* длинный текст */
  --fs-small:14px;
  --fs-caption:13px;
  --fs-label:12px;                               /* надписи КАПСОМ, +0.07em */
  --lh-tight:1.07; --lh-head:1.15; --lh-body:1.5; --lh-prose:1.62;
  --accent-scale:.94;                            /* курсив Playfair чуть мельче TT Norms */
  --measure:66ch;                                /* ширина колонки текста */

  /* ---------- отступы: шаг 4 px ---------- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-18:72px; --s-24:96px;
  --gap-tile:8px;                                 /* между плитками */
  --gutter:10px;                                  /* поле страницы на телефоне */
  --section-gap:var(--s-12);                      /* между разделами: 48 → 72 */
  --container:1200px;

  /* ---------- радиусы ---------- */
  --r-xs:6px;   /* бейджи, пометки */
  --r-sm:10px;
  --r-btn:14px;
  --r-md:16px;  /* вложенные элементы плитки, фото в карточке */
  --r-lg:24px;  /* плитка */
  --r-pill:999px;

  /* ---------- тени: только всплывающее ---------- */
  --shadow-field:0 1px 0 rgba(29,29,27,.06);
  --shadow-pop:0 18px 40px -18px rgba(29,29,27,.35);

  /* ---------- прочее ---------- */
  --tap:44px;                                     /* минимальная тач-цель */
  --dur:150ms;
  --z-header:20; --z-menu:30; --z-dialog:40;
  color-scheme:light;
}

@media (min-width:720px){:root{--gutter:24px}}
@media (min-width:1040px){:root{--section-gap:var(--s-18)}}

/* ---------- тёмная тема: системная (если не выбрана светлая) и выбранная ---------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#111110; --surface:#1B1B19; --surface-sunk:#161614;
    --ink:#F0F0E9; --muted:#A6A69C; --line:#2C2C29; --line-strong:#3A3A36;
    --btn:#F0F0E9; --btn-ink:#111110; --field:#232320; --field-line:#7D7D74;
    --focus:#FFFA80; --focus-halo:#111110;
    --glyph:rgba(255,255,240,.07); --soon-line:#45453F;
    --cover-bg:radial-gradient(90% 85% at 0% 100%,rgba(192,253,130,.20) 0%,transparent 60%),radial-gradient(70% 70% at 100% 100%,rgba(201,232,253,.16) 0%,transparent 62%),radial-gradient(60% 60% at 85% 0%,rgba(254,255,222,.12) 0%,transparent 70%),#1B1B19;
    --cover-ink:#F0F0E9; --cover-muted:#B4B4AA;
    --shadow-pop:0 18px 40px -18px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#111110; --surface:#1B1B19; --surface-sunk:#161614;
  --ink:#F0F0E9; --muted:#A6A69C; --line:#2C2C29; --line-strong:#3A3A36;
  --btn:#F0F0E9; --btn-ink:#111110; --field:#232320; --field-line:#7D7D74;
  --focus:#FFFA80; --focus-halo:#111110;
  --glyph:rgba(255,255,240,.07); --soon-line:#45453F;
  --cover-bg:radial-gradient(90% 85% at 0% 100%,rgba(192,253,130,.20) 0%,transparent 60%),radial-gradient(70% 70% at 100% 100%,rgba(201,232,253,.16) 0%,transparent 62%),radial-gradient(60% 60% at 85% 0%,rgba(254,255,222,.12) 0%,transparent 70%),#1B1B19;
  --cover-ink:#F0F0E9; --cover-muted:#B4B4AA;
  --shadow-pop:0 18px 40px -18px rgba(0,0,0,.8);
  color-scheme:dark;
}