/* parkd — токени дизайн-системи.
   Кольори в шаблонах беруться ТІЛЬКИ звідси. Немає потрібного — це питання,
   а не привід винайти відтінок. Правила застосування: .claude/skills/ui-tokens */

/* Шрифти лежать поруч файлами і вбудовані в бінарник (CLAUDE.md). З CDN їх не
   тягнемо: портал живе за тунелем, і коли назовні інтернету немає, @import не
   просто не завантажує шрифт — він тримає рендер CSS до таймауту. Вночі біля
   воріт це порожній екран на кілька секунд.

   Файли змінні (variable): одна вага 100..900 в одному файлі, тому їх три, а
   не дев'ять. Ліцензія OFL, копія в fonts/OFL.txt. */
@font-face {
  font-family: "Golos Text";
  src: url("/static/fonts/GolosText.ttf") format("truetype-variations"),
       url("/static/fonts/GolosText.ttf") format("truetype");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/fonts/JetBrainsMono.ttf") format("truetype-variations"),
       url("/static/fonts/JetBrainsMono.ttf") format("truetype");
  font-weight: 100 800;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("/static/fonts/Literata.ttf") format("truetype-variations"),
       url("/static/fonts/Literata.ttf") format("truetype");
  font-weight: 200 900;
  font-display: swap;
}

:root {
  /* СВІТЛА ПІСОЧНА СХЕМА — ОСНОВНА І ЄДИНА, якою користується портал.
     Раніше основною була темна (журналом користуються вночі біля воріт), а
     світла жила під [data-theme="light"] тільки для звіту. Замовник вирішив
     звести портал до однієї схеми — світлої, тож ролі помінялись місцями.
     Темна нікуди не поділась: вона нижче, під [data-theme="dark"]. */
  --bg:             #F3EADA;
  --bg-sunken:      #FFFFFF;   /* тло мініатюр, сирі блоки */
  --surface:        #FAF4E9;
  /* Піднята поверхня — це стани «наведено / активно / вибрано», а не висота:
     висоту в світлій схемі несе тінь. Тому вона на тон ГЛИБША за --surface, а
     не світліша: біла поверхня на кремовій картці не читається взагалі
     (1,09:1), і активний пункт навігації зникав. */
  --surface-raised: #EADCC0;
  --border:         #DFD2BC;
  --border-strong:  #B29C77;

  --text:           #12283F;
  --text-2:         #3D5771;
  --text-muted:     #55687E;

  /* Два відтінки золота: один не тягне обидві схеми.
     --accent — ТІЛЬКИ текст, іконка, рамка (#E0B458 як текст тут дає 2,1:1).
     --accent-fill — ТІЛЬКИ заливка, текст на ній --on-accent. */
  --accent:            #845C10;
  --accent-hover:      #66460B;
  --accent-fill:       #C9992E;
  --accent-fill-hover: #B98A24;
  --accent-soft:       #F6E4BE;
  /* Кільце фокуса окремим токеном: --accent-soft на пісочному тлі дає 1,01:1,
     тобто кільця не видно взагалі. Напівпрозоре золото тримається на будь-якій
     поверхні. */
  --accent-ring:       rgba(132, 92, 16, .35);
  --on-accent:         #12283F;

  --ok:      #186541;  --ok-soft:     #DCEBDF;
  --warn:    #7F520D;  --warn-soft:   #F7E7C6;
  --danger:  #A02B26;  --danger-soft: #F6DFDB;

  --overlay: rgba(18, 40, 63, .45);

  /* У світлій схемі висоту несе тінь: картка з кремовою поверхнею на пісочному
     тлі дає 1,09:1, тобто сама по собі краю не має. */
  --sh-1: 0 1px 2px rgba(18,40,63,.08), 0 2px 6px rgba(18,40,63,.10);
  --sh-2: 0 4px 12px rgba(18,40,63,.14);
  --sh-3: 0 16px 40px rgba(18,40,63,.18);

  /* типографіка */
  --font-display: Literata, "PT Serif", Georgia, serif;
  --font-ui:      "Golos Text", "PT Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", Consolas, monospace;

  --fs-h1: 28px;   --lh-h1: 34px;
  --fs-h2: 20px;   --lh-h2: 26px;
  --fs-card: 16px; --lh-card: 22px;
  --fs-body: 15px; --lh-body: 22px;
  --fs-sm: 13px;   --lh-sm: 18px;
  --fs-cap: 11px;  --lh-cap: 14px;  --ls-cap: .08em;
  --fs-num: 14px;  --lh-num: 20px;

  /* простір і форми */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  --r-btn: 8px; --r-input: 8px; --r-card: 12px; --r-modal: 16px; --r-pill: 999px;

  --h-control: 44px;
  --h-control-compact: 36px;
  --h-row: 52px;
  --h-row-media: 72px;
  --w-sidebar: 248px;
}

/* ТЕМНА СХЕМА — та сама система з поміняними ролями. Зараз її ніхто не
   вмикає: жоден екран не виставляє page.Theme. Лишається робочою, бо портал
   живе біля воріт і вночі вона ще може знадобитись — вмикається атрибутом
   data-theme="dark" на <html> (layout.gohtml, поле Theme у internal/web). */
[data-theme="dark"] {
  --bg:             #0D1826;
  --bg-sunken:      #0A1220;
  --surface:        #132234;
  --surface-raised: #1B2E44;
  --border:         #25405C;
  --border-strong:  #3A5D80;

  --text:           #F3E8D5;
  --text-2:         #CBBBA0;
  --text-muted:     #93A3B5;

  /* У темній схемі золото одне: воно й текст, і заливка. --accent-fill тут
     дорівнює --accent — щоб правило «заливка тільки з --accent-fill»
     працювало однаково в обох схемах, без підстановок у компонентах. */
  --accent:            #E0B458;
  --accent-hover:      #EFC978;
  --accent-fill:       #E0B458;
  --accent-fill-hover: #EFC978;
  --accent-soft:       #2A2415;
  --accent-ring:       rgba(224, 180, 88, .32);
  --on-accent:         #0D1826;

  --ok:      #6BC48F;  --ok-soft:     #132A20;
  --warn:    #E9A93C;  --warn-soft:   #2B2312;
  --danger:  #F08578;  --danger-soft: #2E1A18;

  --overlay: rgba(5, 10, 18, .72);

  /* у темній схемі картки БЕЗ тіні — висота передається світлотою поверхні */
  --sh-1: none;
  --sh-2: 0 8px 24px rgba(0, 0, 0, .45);
  --sh-3: 0 24px 60px rgba(0, 0, 0, .60);
}

/* Золото в схемах різне не для краси: #E0B458 як текст на пергаменті дає
   2,1:1, а #845C10 як заливка з темним текстом — 5,8:1. Ніколи не підставляй
   відтінок однієї схеми в іншу. */