/* Recipe App — design-system token layer (from recipe-app-design/07). ------- *
 * Two layers, mirroring the Figma structure:                                  *
 *   1. Primitives  — raw values. NEVER reference these directly in components. *
 *   2. Semantic    — the only layer components touch (--color-*, --space-*…).  *
 * Semantic colours have Light (:root) and Dark (@media / [data-theme]) modes.  *
 * Drop this into base.html's <style> (or a linked stylesheet) and bind         *
 * component CSS to the semantic vars only. A hardcoded hex in a component is    *
 * a bug (see SKILL.md "Bind everything").                                       */

:root {
  /* — 1. PRIMITIVES (do not use directly) — */
  --forest-900:#0C271E; --forest-800:#143E30; --forest-700:#1D5240;
  --forest-600:#2A6B54; --forest-500:#3D8A6E; --forest-100:#D6E5DE; --forest-50:#EAF2EE;
  --lime-600:#A8CC33; --lime-500:#D2F65A; --lime-300:#E3F99A; --lime-100:#F0FCC9;
  --sand-00:#FFFFFF; --sand-50:#FBFAF5; --sand-100:#F7F5EE; --sand-200:#EDEAE0;
  --sand-300:#DCD8CA; --sand-400:#B8B3A3; --sand-500:#8C8779; --sand-600:#6B675C;
  --sand-700:#4A473F; --sand-800:#2A2823; --sand-900:#14140F;
  --ink-900:#0B0D0C; --ink-800:#131715; --ink-700:#1B201E; --ink-600:#272D2A;
  --ink-500:#39413D; --ink-400:#5A635E;
  --mint-100:#DFF5C4; --mint-600:#4F7A1F; --mint-900:#1E2F12;
  --butter-100:#FBF0B8; --butter-600:#8A6D0B; --butter-900:#3A2F10;
  /* Scrim — те, що лежить НА фото. Значеннями збігається з ink-900/sand-50, але
     це окремі примітиви, і навмисно: над знімком колір не має права
     перевертатись разом із темою, тож він не може позичати роль у сімейств,
     які перевертаються. Додано у Figma після першої звірки (2026-08-13). */
  --scrim-900:#0B0D0C; --scrim-50:#FBFAF5;

  /* — 2. SEMANTIC COLOUR — Light mode — */
  --color-bg-canvas:var(--sand-100);
  --color-bg-surface:var(--sand-00);
  --color-bg-subtle:var(--sand-200);
  --color-bg-inverse:var(--forest-800);   /* primary CTA = forest, not black */
  --color-bg-accent:var(--lime-500);      /* the loud one — use sparingly */
  --color-bg-accent-soft:var(--lime-100);
  --color-bg-overlay:var(--sand-900);     /* Figma: color/bg/overlay — збігається */
  --color-text-primary:var(--sand-900);
  --color-text-secondary:var(--sand-600);
  --color-text-muted:var(--sand-500);
  --color-text-inverse:var(--sand-50);
  --color-text-accent:var(--forest-700);
  --color-text-on-accent:var(--sand-900);
  --color-border-default:var(--sand-300);
  --color-border-strong:var(--sand-400);
  --color-border-focus:var(--forest-600);
  --color-tag-diet-bg:var(--mint-100);   --color-tag-diet-text:var(--mint-600);
  --color-tag-time-bg:var(--butter-100); --color-tag-time-text:var(--butter-600);

  /* Signal colours — SAME in both modes. Only for difficulty + inventory match. *
   * Light is verified against Figma. In dark, only -poor was actually observed;  *
   * -good and -moderate are ASSUMED unchanged, on the strength of -poor holding  *
   * and the rule being stated in the handbook. Likely right, not confirmed —     *
   * see SKILL.md "Figma sync status" for how to close it.                        */
  /* Над фото — ОДНАКОВІ в обох темах, як і сигнальні. Текст на знімку не має
     права перевертатись разом із темою: під ним не наша поверхня, а чужий
     кадр, і в темній темі темний текст на світлому фото читався б не краще.
     Саме тому це власні токени, а не `text/primary` з інверсією.
     `bg/on-media-chip` — підкладка чипа поверх кадру, `bg/scrim` — затемнення
     під текстом. Раніше все це було rgba(255,255,255,…) прямо в CSS. */
  --color-text-on-media:var(--scrim-50);
  --color-bg-on-media-chip:var(--scrim-50);
  --color-bg-scrim:var(--scrim-900);

  --color-signal-good:#22A45D;      /* Easy / full match */
  --color-signal-moderate:#F5B833;  /* Medium / partial match */
  --color-signal-poor:#E5484D;      /* Hard / allergen warning */

  /* — SPACING — 4pt grid. Values match Figma exactly, but Figma's code syntax  *
   * emits var(--spacing-*) while the canonical name here is --space-*. Fix the  *
   * code syntax in Figma rather than renaming these; the repo is the consumer.  */
  --space-2xs:2px; --space-xs:4px; --space-sm:8px; --space-md:12px;
  --space-base:16px; --space-lg:20px; --space-xl:24px; --space-2xl:32px;
  --space-3xl:40px; --space-4xl:48px; --space-5xl:64px;

  /* — RADIUS — */
  --radius-none:0; --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
  --radius-xl:20px; --radius-2xl:28px; --radius-full:999px;

  /* — ELEVATION — one shadow, and it points UP (sticky bottom bars only). ---- *
   * Figma: Elevation/Sticky — #14140F1F, offset 0/-4, blur 20, spread 0.        */
  --shadow-sticky:0 -4px 20px rgba(20,20,15,.12);

  /* — TYPOGRAPHY families — Inter = UI, Lora = recipe titles/editorial. ------ *
   * Self-hosted (app/static/fonts.css, built by scripts/fetch_fonts.py), with   *
   * Cyrillic subsets — the app is Ukrainian-first, so a Latin-only face would   *
   * style the demo text and nothing a user actually reads.                      *
   *                                                                             *
   * These replace the Archivo/Fraunces the system was designed around: neither  *
   * has Cyrillic at all, in Google Fonts or upstream. Same roles, same scale —  *
   * only the families changed. Don't "restore" the originals.                   */
  --font-ui:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-editorial:"Lora", Georgia, "Times New Roman", serif;

  /* — TYPE SCALE — mirrors the Figma text styles 1:1 (size/line-height/tracking). *
   * Tracking in Figma is a PERCENTAGE, so it converts to em, not px. Use these as *
   * a set: font:var(--text-body-m) misses the tracking, so set it alongside.      *
   * Editorial/* and Quote are Fraunces; everything else Archivo.                  */
  --text-editorial-display:600 40px/44px var(--font-editorial);
  --text-editorial-h1:600 32px/37px var(--font-editorial);      --tracking-editorial-h1:-.01em;
  --text-editorial-h2:600 24px/30px var(--font-editorial);      --tracking-editorial-h2:-.005em;
  --text-editorial-quote:italic 400 18px/27px var(--font-editorial);
  --text-display-xl:700 36px/38px var(--font-ui);
  --text-heading-l:700 24px/28px var(--font-ui);                --tracking-heading-l:-.01em;
  --text-heading-m:600 20px/26px var(--font-ui);                --tracking-heading-m:-.005em;
  --text-heading-s:600 17px/22px var(--font-ui);                --tracking-heading-s:-.003em;
  --text-body-l:400 17px/26px var(--font-ui);
  --text-body-m:400 15px/22px var(--font-ui);
  --text-body-s:400 13px/18px var(--font-ui);
  --text-label-l:500 16px/20px var(--font-ui);
  --text-label-m:500 14px/18px var(--font-ui);
  --text-label-s:500 12px/16px var(--font-ui);                  --tracking-label-s:.01em;
  --text-overline:600 11px/14px var(--font-ui);                 --tracking-overline:.08em;

  /* — Avatar identity colours ---------------------------------------------- *
   * Шість пар «тло + текст» для аватарів-ініціалів. Це ЄДИНЕ декоративне
   * використання кольору в системі, тож правила про сигнальні кольори воно не
   * порушує: колір тут не означає стану, він лише розрізняє людей.
   * Складені з наявних примітивів — нових значень у палітру не заходить.
   * Свідомо НЕ міняються між темами: колір людини має лишатись тим самим, бо
   * впізнають саме його, а не тему. Контраст тримає пара fg до свого bg.      */
  --avatar-1-bg:var(--forest-700);  --avatar-1-fg:var(--sand-50);
  --avatar-2-bg:var(--forest-500);  --avatar-2-fg:var(--sand-900);
  --avatar-3-bg:var(--lime-600);    --avatar-3-fg:var(--sand-900);
  --avatar-4-bg:var(--sand-400);    --avatar-4-fg:var(--sand-900);
  --avatar-5-bg:var(--sand-600);    --avatar-5-fg:var(--sand-50);
  --avatar-6-bg:var(--ink-500);     --avatar-6-fg:var(--sand-50);

  /* — Категоріальна палітра діаграм (адмінка: ШІ, статистика) ---------------- *
   * Вісім слотів у ФІКСОВАНОМУ порядку: колір належить сутності, а не її       *
   * місцю в рейтингу, тож фільтр, що прибирає серію, не перефарбовує решту.    *
   * Дев'ятого слота не буде: згенерований дев'ятий відтінок нерозрізненний     *
   * від наявних при дальтонізмі — хвіст згортається в «Інше».                  *
   * Це НЕ бренд-кольори застосунку: лайм і форест тут не годяться (вісім       *
   * відтінків одного тону злипаються), тому палітра власна й перевірена        *
   * валідатором проти наших же поверхонь — світлої #FFFFFF і темної #131715:   *
   * смуга світлості, поріг насиченості, розділеність при дальтонізмі та        *
   * контраст. Три світлі слоти лишились нижче 3:1 до білого — тому легенда з   *
   * підписами й числами обовʼязкова, і саме вона їх «страхує».                 */
  --chart-1:#2a78d6; --chart-2:#eb6834; --chart-3:#1baf7a; --chart-4:#eda100;
  --chart-5:#e87ba4; --chart-6:#008300; --chart-7:#4a3aa7; --chart-8:#e34948;

  color-scheme: light dark;
}

/* — Dark mode — same semantic names, primitive aliases swap. ---------------- *
 * Follows OS preference by default, and an explicit [data-theme] wins so a     *
 * future in-app toggle can override. Signals + accent bg are intentionally     *
 * unchanged; note the primary CTA inverts to a cream pill in dark.             */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-canvas:var(--ink-900);
    --color-bg-surface:var(--ink-800);
    --color-bg-subtle:var(--ink-700);
    --color-bg-inverse:var(--sand-100);     /* cream pill CTA in dark */
    --color-bg-accent:var(--lime-500);
    --color-bg-accent-soft:var(--forest-800);
    --color-bg-overlay:var(--ink-900);
    --color-text-primary:var(--sand-50);
    --color-text-secondary:var(--sand-300);
    --color-text-muted:var(--ink-400);
    --color-text-inverse:var(--sand-900);
    --color-text-accent:var(--lime-500);
    --color-text-on-accent:var(--sand-900);
    --color-border-default:var(--ink-600);
    --color-border-strong:var(--ink-500);
    --color-border-focus:var(--lime-500);   /* ASSUMED — not yet verified in Figma */
    --color-tag-diet-bg:var(--mint-900);   --color-tag-diet-text:var(--mint-100);
    --color-tag-time-bg:var(--butter-900); --color-tag-time-text:var(--butter-100);
    /* Ті самі вісім тонів, перекроковані під темну поверхню, а не механічно
       інвертовані: у темряві світлі кроки «світяться» і злипаються. */
    --chart-1:#3987e5; --chart-2:#d95926; --chart-3:#199e70; --chart-4:#c98500;
    --chart-5:#d55181; --chart-6:#008300; --chart-7:#9085e9; --chart-8:#e66767;
  }
}
:root[data-theme="dark"] {
  --color-bg-canvas:var(--ink-900);
  --color-bg-surface:var(--ink-800);
  --color-bg-subtle:var(--ink-700);
  --color-bg-inverse:var(--sand-100);
  --color-bg-accent:var(--lime-500);
  --color-bg-accent-soft:var(--forest-800);
  --color-bg-overlay:var(--ink-900);
  --color-text-primary:var(--sand-50);
  --color-text-secondary:var(--sand-300);
  --color-text-muted:var(--ink-400);
  --color-text-inverse:var(--sand-900);
  --color-text-accent:var(--lime-500);
  --color-text-on-accent:var(--sand-900);
  --color-border-default:var(--ink-600);
  --color-border-strong:var(--ink-500);
  --color-border-focus:var(--lime-500);   /* ASSUMED — not yet verified in Figma */
  --color-tag-diet-bg:var(--mint-900);   --color-tag-diet-text:var(--mint-100);
  --color-tag-time-bg:var(--butter-900); --color-tag-time-text:var(--butter-100);
  /* Дубль темних слотів для явного вибору теми — щоб перемикач у кабінеті
     вигравав над системною світлою так само, як і решта токенів. */
  --chart-1:#3987e5; --chart-2:#d95926; --chart-3:#199e70; --chart-4:#c98500;
  --chart-5:#d55181; --chart-6:#008300; --chart-7:#9085e9; --chart-8:#e66767;
}