/*
 * tokens.css — дизайн-токени «Ліцензійного реєстру Держпраці».
 *
 * ІСТОРІЯ (детально — docs/design-spec.md, розд. «Історія рішення»):
 * спершу дизайн робили за наказом Мінцифри №57 від 23.06.2022 (обов'язковий
 * держ-дизайн-код). Замовник змінив вимогу: система стає ВНУТРІШНЬОЮ
 * (2-3 посадові особи Держпраці, мережа + віддалено), тому наказ №57 і
 * погодження з Мінцифрою більше НЕ застосовуються. Натомість реєстр бере
 * фірмовий стиль ПОРТАЛУ ДЕРЖПРАЦІ (еталон:
 * projects/departament-pratsi/portal/design/prototype.html) — щоб виглядати
 * органічною частиною тієї самої екосистеми.
 *
 * ПРАВИЛО ФАЙЛУ: це ЄДИНЕ місце в проєкті, де дозволено писати сирі hex-кольори.
 * Усі інші css-файли/шаблони використовують ТІЛЬКИ var(--...) з цього файлу.
 */

:root {
  /* ---------------------------------------------------------------------
   * ОСНОВНІ ТОКЕНИ ПОРТАЛУ — світла тема (дефолт).
   * Джерело: prototype.html, кореневий :root. Синій #1E52D0 — той самий,
   * що в печатці Держпраці (dsp-mail-seal.svg) — єдиний акцент бренду.
   * ------------------------------------------------------------------- */
  --bg: #F2F5FA;
  --surface: #FFFFFF;
  --surface-2: #F7F9FD;
  --surface-3: #EDF1F8;
  --line: #DCE3EF;
  --line-strong: #C3CDDF;
  --ink: #111A2B;
  --ink-2: #54617A;
  --ink-3: #8C97AB;

  --brand: #1E52D0;
  --brand-deep: #16409E;
  --brand-soft: #E7EEFD;
  --brand-line: #BED0F7;

  --seal: #E09600;
  --seal-soft: #FDF1D8;

  --ok: #0F8F62;
  --ok-soft: #E2F5EE;
  --warn: #B87400;
  --warn-soft: #FBEFD9;
  --crit: #C92C2C;
  --crit-soft: #FBE6E6;

  --shadow: 0 1px 2px rgba(16, 26, 45, .06), 0 8px 24px -12px rgba(16, 26, 45, .18);
  --shadow-lg: 0 2px 6px rgba(16, 26, 45, .08), 0 24px 48px -20px rgba(16, 26, 45, .28);

  /* Підложка модалки — навмисно та сама в обох темах (як і в prototype.html):
   * темно-синя напівпрозора завіса читається однаково поверх світлого й
   * темного вмісту. */
  --overlay-veil: rgba(10, 18, 34, .55);

  --r: 12px;
  --r-sm: 8px;
  --r-lg: 18px;
  --rail: 248px;

  --f-ui: ui-sans-serif, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --f-mono: ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;

  /* ---------------------------------------------------------------------
   * ТИПОГРАФІЧНА ШКАЛА — компактна, «продуктова», як у порталі
   * (замінює колишню акцидентну шкалу наказу №57, 56px..20px).
   * ------------------------------------------------------------------- */
  --font-family-base: var(--f-ui);
  --font-family-head: var(--f-ui); /* портал не має окремої гарнітури заголовків — одна системна */

  --font-weight-thin: 300;
  --font-weight-ultralight: 350;
  --font-weight-light: 400;
  --font-weight-regular: 400;
  --font-weight-medium: 550;
  --font-weight-bold: 650;

  --fs-h1: 26px;  --lh-h1: 1.2;
  --fs-h2: 19px;  --lh-h2: 1.25;
  --fs-h3: 17px;  --lh-h3: 1.3;
  --fs-h4: 16px;  --lh-h4: 1.35;
  --fs-h5: 15.5px; --lh-h5: 1.35;
  --fs-h6: 15px;  --lh-h6: 1.4;
  --fs-h7: 14.5px; --lh-h7: 1.4;

  --fs-body-lg: 16px; --lh-body-lg: 1.55;
  --fs-body: 15px;    --lh-body: 1.55;
  --fs-small: 13.5px; --lh-small: 1.5;
  --fs-caption: 12.5px; --lh-caption: 1.4;

  /* ---------------------------------------------------------------------
   * ВІДСТУПИ — базова шкала 4px (не суперечить стилю порталу, портал просто
   * не виносить її в токени — тримаємо для наших-таки утиліт/партіалів).
   * ------------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---------------------------------------------------------------------
   * ШИРИНИ — вирівняно з рамками порталу (.page { max-width:1240px }).
   * ------------------------------------------------------------------- */
  --width-page-max: 1680px;
  --width-text-max: 820px;
  --width-content-max: 1240px;

  /* ---------------------------------------------------------------------
   * БРЕЙКПОЙНТИ (орієнтир — CSS var() не працює всередині @media, реальні
   * @media нижче в base.css/components.css задубльовані як літерали px,
   * САМЕ ці числа). --bp-rail — поріг, на якому ховається бічна навігація
   * (як у прототипі порталу, .app{grid-template-columns:1fr} на ≤860px).
   * ------------------------------------------------------------------- */
  --bp-sm: 480px;
  --bp-md: 640px;
  --bp-md2: 768px;
  --bp-lg: 1024px;
  --bp-rail: 860px;
  --bp-xl: 1280px;

  /* ---------------------------------------------------------------------
   * ІНШЕ
   * ------------------------------------------------------------------- */
  --radius-sm: var(--r-sm);
  --radius-md: var(--r);
  --radius-lg: var(--r-lg);
  --radius-pill: 999px;
  --border-width: 1px;
  --focus-ring-width: 2px;
  --color-focus-ring: var(--brand);
  --shadow-card: var(--shadow);
  --z-header: 100;
  --z-rail: 90;
  --z-modal-veil: 600;
  --z-tooltip: 700;
  --z-skiplink: 1000;

  /* ---------------------------------------------------------------------
   * СТАТУСИ ЛІЦЕНЗІЇ — м'які «пігулки» в стилі порталу (soft-фон + кольоровий
   * текст), а не суцільна заливка з наказу №57. Мапінг на семантику:
   *   чинна → --ok · зупинена → --warn · анульована → --crit
   *   відкликана → --ink-3 (нейтральний, немає власного «стану»)
   * ------------------------------------------------------------------- */
  --color-status-active-bg: var(--ok-soft);
  --color-status-active-fg: var(--ok);
  --color-status-suspended-bg: var(--warn-soft);
  --color-status-suspended-fg: var(--warn);
  --color-status-revoked-bg: var(--crit-soft);
  --color-status-revoked-fg: var(--crit);
  --color-status-withdrawn-bg: var(--surface-3);
  --color-status-withdrawn-fg: var(--ink-3);

  /* Текст поверх насиченого кольору seal/amber (--nav-badge.amber тощо) —
   * окремо від --color-text-on-accent, бо на амбері генеричний білий/темний
   * дає гірший контраст, ніж підібраний вручну відтінок (так само зроблено
   * і в prototype.html: .nav-badge.amber має свій колір тексту). */
  --color-text-on-seal: #3A2A00;

  /* Лейбл публікаційного стану запису (чернетка/на затвердженні/опубліковано) */
  --color-pub-draft-bg: var(--surface-3);
  --color-pub-draft-fg: var(--ink-2);
  --color-pub-review-bg: var(--seal-soft);
  --color-pub-review-fg: var(--seal);
  --color-pub-published-bg: var(--ok-soft);
  --color-pub-published-fg: var(--ok);

  /* =========================================================================
   * СУМІСНІСТЬ НАЗАД — старі семантичні псевдоніми з часів наказу №57.
   * Інші агенти паралельно пишуть src/templates/registry/**, і могли вже
   * використати ці назви змінних напряму. Значення нижче лише ПОСИЛАЮТЬСЯ
   * на нові токени вище — нових кольорів тут не додавати.
   * ======================================================================= */
  --color-bg-page: var(--bg);
  --color-bg-surface: var(--surface);
  --color-bg-surface-muted: var(--surface-2);
  --color-bg-section: var(--surface-2);
  --color-bg-header: var(--surface);
  --color-bg-footer: var(--surface-2);
  --color-bg-accent: var(--brand);
  --color-bg-hover: var(--surface-2);
  --color-bg-stripe: var(--surface-2);

  --color-text-primary: var(--ink);
  --color-text-secondary: var(--ink-2);
  --color-text-muted: var(--ink-3);
  --color-text-on-dark: var(--bg);
  --color-text-on-accent: #FFFFFF;
  --color-text-black: var(--ink);
  --color-text-white: #FFFFFF;
  --color-text-gray: var(--ink-3);

  --color-border-default: var(--line);
  --color-border-subtle: var(--line);
  --color-border-strong: var(--line-strong);

  --color-link: var(--brand);
  --color-link-visited: var(--brand-deep);

  --color-base-white: #FFFFFF;
  --color-base-black: var(--ink);
  --color-base-accent: var(--brand);
  --color-base-fog: var(--surface-2);
  --color-base-gray-light: var(--surface-3);

  --color-state-error: var(--crit);
  --color-state-warning: var(--warn);
  --color-state-success: var(--ok);

  --color-feedback-bg: var(--surface);
  --color-feedback-text: var(--ink);
  --color-feedback-error-accent: var(--crit);
  --color-feedback-warning-accent: var(--warn);
  --color-feedback-success-accent: var(--ok);
}

/* ---------------------------------------------------------------------
 * ТЕМНА ТЕМА — і за системною преференцією, і вручну через перемикач
 * (data-theme на <html>, зберігається в localStorage — див. base.html).
 * ------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0C111B; --surface: #131A28; --surface-2: #182132; --surface-3: #1E293C;
    --line: #26314A; --line-strong: #3A4763;
    --ink: #E8ECF5; --ink-2: #A4AFC5; --ink-3: #6E7A91;
    --brand: #6E9BFF; --brand-deep: #9BBAFF; --brand-soft: #17243F; --brand-line: #2B4372;
    --seal: #F6C445; --seal-soft: #2C2415;
    --ok: #3FD39A; --ok-soft: #122A22;
    --warn: #F0B03C; --warn-soft: #2C2314;
    --crit: #F2706E; --crit-soft: #2E1719;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, .5), 0 24px 48px -20px rgba(0, 0, 0, .7);
    --color-text-on-accent: #0C111B;
    --color-text-on-seal: #2C2415;
  }
}

:root[data-theme="dark"] {
  --bg: #0C111B; --surface: #131A28; --surface-2: #182132; --surface-3: #1E293C;
  --line: #26314A; --line-strong: #3A4763;
  --ink: #E8ECF5; --ink-2: #A4AFC5; --ink-3: #6E7A91;
  --brand: #6E9BFF; --brand-deep: #9BBAFF; --brand-soft: #17243F; --brand-line: #2B4372;
  --seal: #F6C445; --seal-soft: #2C2415;
  --ok: #3FD39A; --ok-soft: #122A22;
  --warn: #F0B03C; --warn-soft: #2C2314;
  --crit: #F2706E; --crit-soft: #2E1719;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .5), 0 24px 48px -20px rgba(0, 0, 0, .7);
  --color-text-on-accent: #0C111B;
  --color-text-on-seal: #2C2415;
}

:root[data-theme="light"] {
  --bg: #F2F5FA; --surface: #FFFFFF; --surface-2: #F7F9FD; --surface-3: #EDF1F8;
  --line: #DCE3EF; --line-strong: #C3CDDF;
  --ink: #111A2B; --ink-2: #54617A; --ink-3: #8C97AB;
  --brand: #1E52D0; --brand-deep: #16409E; --brand-soft: #E7EEFD; --brand-line: #BED0F7;
  --seal: #E09600; --seal-soft: #FDF1D8;
  --ok: #0F8F62; --ok-soft: #E2F5EE;
  --warn: #B87400; --warn-soft: #FBEFD9;
  --crit: #C92C2C; --crit-soft: #FBE6E6;
  --shadow: 0 1px 2px rgba(16, 26, 45, .06), 0 8px 24px -12px rgba(16, 26, 45, .18);
  --shadow-lg: 0 2px 6px rgba(16, 26, 45, .08), 0 24px 48px -20px rgba(16, 26, 45, .28);
  --color-text-on-accent: #FFFFFF;
  --color-text-on-seal: #3A2A00;
}