/* Токены дизайн-системы myqaz.
 *
 * Заменяют 86 самостоятельных :root старой версии: 1 799 цветов (1 265 из них
 * встречались ровно один раз), 470 размеров шрифта, 407 скруглений, 414 теней,
 * 26 брейкпоинтов. Здесь всё это сведено к одной шкале на каждую ось.
 *
 * Правило цвета: тон означает ТЕМУ раздела, а не украшает страницу. Тон входит
 * тремя каплями — полоса темы в шапке, акцент ссылок и активных элементов,
 * заливка одного ключевого элемента. Фон, текст и линии общие для всего сайта.
 *
 * Семантика (ok/warn/bad) — отдельная ось от темы. Статус рисуется формой
 * (пилюля с рамкой) плюс семантическим цветом; тема живёт в полосе и акценте.
 * В одном элементе они не встречаются.
 */

:root {
  /* --- нейтрали: холодная бумага с лёгким синим уклоном, а не серый по умолчанию --- */
  --paper:        #F3F5F9;
  --surface:      #FFFFFF;
  --surface-2:    #E9EDF3;
  --ink:          #141C26;
  --muted:        #5C6A7A;
  --line:         #DBE1EA;
  --line-strong:  #BFC8D4;

  /* --- шесть тем и графит для утилит без темы --- */
  --d-law:        #3A45A8;
  --d-gov:        #12678A;
  --d-money:      #217A45;
  --d-health:     #0D7A70;
  --d-nature:     #9A6210;
  --d-culture:    #962F66;
  --d-util:       #4E5C6B;

  /* Текст поверх залитого тоном элемента. Переключается вместе с темой:
     в тёмной теме тона светлые, и белый по ним нечитаем. */
  --on-hue:       #FFFFFF;

  /* Тема страницы. Каждый раздел переопределяет --theme на своём корне. */
  --theme:        var(--d-law);

  /* --- семантика состояния, ось отдельная от темы --- */
  --ok:           #1C7A46;
  --warn:         #B26A08;
  --bad:          #A8332A;
  --info:         #12678A;

  /* --- типографика: три роли, каждая с полной казахской кириллицей --- */
  --ff-ui:   'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-doc:  'PT Serif', Georgia, 'Times New Roman', serif;
  --ff-data: 'PT Mono', ui-monospace, 'Cascadia Mono', monospace;
  /* Арабское начертание. Своего у нас нет: подставлять вместо арабского
     латиницу с кириллицей было бы подменой текста, поэтому берём системное.
     Живёт в словаре, как и остальные три, — начертание мимо словаря однажды
     не совпадёт ни с одним из них. */
  --ff-arabic: 'Geeza Pro', 'Noto Naskh Arabic', 'Times New Roman', serif;

  /* Шкала из восьми размеров вместо 470. */
  --fs-xs:    12px;
  --fs-sm:    13.5px;
  --fs-base:  16px;
  --fs-md:    19px;
  --fs-lg:    24px;
  --fs-xl:    31px;
  --fs-2xl:   40px;
  --fs-3xl:   52px;

  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-normal: 1.6;
  --lh-loose:  1.75;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;
  --fw-black:  900;

  --ls-tight: -0.02em;
  --ls-label:  0.12em;

  /* --- отступы: одна шкала --- */
  --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;

  /* --- форма: четыре скругления вместо 407 --- */
  --r-sm:   5px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-pill: 100px;

  /* --- высота: три уровня вместо 414 --- */
  --sh-1: 0 1px 2px rgba(20, 28, 38, .05);
  --sh-2: 0 1px 2px rgba(20, 28, 38, .05), 0 8px 24px -12px rgba(20, 28, 38, .16);
  --sh-3: 0 2px 4px rgba(20, 28, 38, .06), 0 16px 40px -16px rgba(20, 28, 38, .24);

  /* --- ширины --- */
  --w-prose: 66ch;
  --w-page:  1120px;
  --w-wide:  1360px;

  /* --- движение: только функциональное, потолок 200мс --- */
  --dur-fast: 150ms;
  --dur:      200ms;
  --ease:     cubic-bezier(.2, 0, .2, 1);
}

/* Брейкпоинтов три, и они перечислены здесь как справка: CSS не позволяет
   использовать переменные в @media, поэтому значения пишутся числом, но
   других чисел в проекте быть не должно.
     560px  — телефон / всё остальное
     900px  — планшет / десктоп
     1200px — широкий десктоп
*/

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:       #0E1319;
    --surface:     #151B23;
    --surface-2:   #1D252E;
    --ink:         #E3E9F1;
    --muted:       #8E9BAA;
    --line:        #262F39;
    --line-strong: #38434F;

    --d-law:     #8E99F2;
    --d-gov:     #4FB4D6;
    --d-money:   #5FC786;
    --d-health:  #3FC6B5;
    --d-nature:  #E0A54A;
    --d-culture: #E67BB1;
    --d-util:    #8C9AAA;

    --on-hue: #0E1319;

    --ok:   #57C983;
    --warn: #EDAE4E;
    --bad:  #E8776B;
    --info: #4FB4D6;

    --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
    --sh-2: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -14px rgba(0, 0, 0, .7);
    --sh-3: 0 2px 6px rgba(0, 0, 0, .5), 0 18px 44px -18px rgba(0, 0, 0, .8);
  }
}

:root[data-theme="dark"] {
  --paper:       #0E1319;
  --surface:     #151B23;
  --surface-2:   #1D252E;
  --ink:         #E3E9F1;
  --muted:       #8E9BAA;
  --line:        #262F39;
  --line-strong: #38434F;

  --d-law:     #8E99F2;
  --d-gov:     #4FB4D6;
  --d-money:   #5FC786;
  --d-health:  #3FC6B5;
  --d-nature:  #E0A54A;
  --d-culture: #E67BB1;
  --d-util:    #8C9AAA;

  --on-hue: #0E1319;

  --ok:   #57C983;
  --warn: #EDAE4E;
  --bad:  #E8776B;
  --info: #4FB4D6;

  --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-2: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -14px rgba(0, 0, 0, .7);
  --sh-3: 0 2px 6px rgba(0, 0, 0, .5), 0 18px 44px -18px rgba(0, 0, 0, .8);
}

/* Тема раздела ставится классом на <html> или на корневом узле страницы. */
[data-topic="law"]     { --theme: var(--d-law); }
[data-topic="gov"]     { --theme: var(--d-gov); }
[data-topic="money"]   { --theme: var(--d-money); }
[data-topic="health"]  { --theme: var(--d-health); }
[data-topic="nature"]  { --theme: var(--d-nature); }
[data-topic="culture"] { --theme: var(--d-culture); }
[data-topic="util"]    { --theme: var(--d-util); }