/* ============================================================================
   pt-tokens.css — "Psychotech Zen" дизайн системийн token давхарга

   БҮТЭЦ (2026-08-06-нд өөрчлөгдсөн):
     1. `--zen-*` = ЦОРЫН ГАНЦ ҮНЭНИЙ ЭХ СУРВАЛЖ. Бүх өнгө энд нэг л удаа
        бичигдэнэ. Эх сурвалж: stitch_visual_feature_extractor/DESIGN.md.
     2. `--pt-*` = зөвхөн `--zen-*` руу заасан ALIAS. Литерал утга БАЙХГҮЙ.

   Яагаад орлуулах биш, alias хийсэн бэ: өмнө нь `--primary-color` (scheme-01)
   ба `--pt-primary` хоёр тус тусдаа #5a9e7c-г шууд бичдэг байсан. Нэгийг нь
   өөрчилвөл апп хагасаараа өнгөө сольж, хаана ч алдаа гардаггүй байв. Alias
   болгосноор хоёр систем дахин хэзээ ч салж зөрөх боломжгүй.

   ДҮРЭМ — primary vs primary-container:
     ЖИЖИГ ТЕКСТ, ДҮРС      → --zen-primary (#0c5c56), цөцгий дээр 6.58:1
     ДҮҮРГЭСЭН ГАДАРГУУ, ТОМ → --zen-primary-container (#2f756e), 5.13:1
   #2f756e-г 14px текстэд ашиглавал WCAG AA-д хүрэхгүй.

   DESIGN.md vs code.html-ийн зөрүүг хэрхэн шийдсэн:
     • surface  #fff9e7 (DESIGN.md) — code.html-ийн #fff9ea биш
     • primary  хоёуланг нь авав (дээрх дүрэм)
     • DESIGN.md-ийн зохиол хэсэг дэх "#f0ead2" нь өөрийнх нь frontmatter-тай
       зөрчилдөнө → хэрэгжүүлээгүй
   ========================================================================== */
:root {
  /* ══ ZEN ЦӨМ — өнгө энд л бичигдэнэ ══════════════════════════════ */

  /* Гадаргуу (Cream / Stone) — цэвэр саарал биш, "цаасан" дулаан */
  --zen-surface: #fff9e7;
  --zen-surface-dim: #e0dac3;
  --zen-surface-bright: #fff9e7;
  --zen-surface-lowest: #ffffff;
  --zen-surface-low: #faf4db;
  --zen-surface-container: #f4eed6;
  --zen-surface-high: #eee8d0;
  --zen-surface-highest: #e9e3cb;
  --zen-surface-variant: #e9e3cb;

  /* Текст */
  --zen-on-surface: #1e1c0d;
  --zen-on-surface-variant: #3f4947;
  --zen-inverse-surface: #333121;
  --zen-inverse-on-surface: #f7f1d9;

  /* Хүрээ */
  --zen-outline: #6f7977;
  --zen-outline-variant: #bec9c6;

  /* Бүдэг ТЕКСТ. DESIGN.md-д ийм үүрэг байхгүй тул эхэндээ `outline`-ыг
     ашигласан ч тэр нь ХҮРЭЭНИЙ өнгө: цөцгий дээр 4.27:1 буюу AA-д хүрэхгүй
     (амьд хэмжилтээр батлагдсан). Хүрээний өнгийг текстэд ашиглах нь алдаа —
     тиймээс on-surface-variant ба outline хоёрын хооронд тусдаа утга гаргав.
     Цөцгий дээр 5.81:1. */
  --zen-on-surface-muted: #5a6462;

  /* Primary (Evergreen) */
  --zen-primary: #0c5c56;
  --zen-on-primary: #ffffff;
  --zen-primary-container: #2f756e;
  --zen-on-primary-container: #b3f9f0;
  --zen-inverse-primary: #8fd3cb;
  --zen-primary-fixed: #aaefe7;
  --zen-primary-fixed-dim: #8fd3cb;
  --zen-on-primary-fixed: #00201d;
  --zen-on-primary-fixed-variant: #00504a;
  --zen-surface-tint: #2f756e;

  /* Secondary (Moss) */
  --zen-secondary: #546526;
  --zen-on-secondary: #ffffff;
  --zen-secondary-container: #d4e89a;
  --zen-on-secondary-container: #58692a;
  --zen-secondary-fixed: #d6eb9d;
  --zen-secondary-fixed-dim: #bbcf83;
  --zen-on-secondary-fixed: #161f00;
  --zen-on-secondary-fixed-variant: #3d4c0f;

  /* Tertiary (Clay) */
  --zen-tertiary: #6a4b32;
  --zen-on-tertiary: #ffffff;
  --zen-tertiary-container: #856348;
  --zen-on-tertiary-container: #ffe7d7;
  --zen-tertiary-fixed: #ffdcc3;
  --zen-tertiary-fixed-dim: #e9be9e;
  --zen-on-tertiary-fixed: #2c1603;
  --zen-on-tertiary-fixed-variant: #5e4028;

  /* Error */
  --zen-error: #ba1a1a;
  --zen-on-error: #ffffff;
  --zen-error-container: #ffdad6;
  --zen-on-error-container: #93000a;

  /* Системд байхгүй ганц өнгө. Zen-д ягаан/нил ягаан байхгүй ч «дараагийн
     уулзалт» төлөвийг «амжилттай»-аас ялгах шаардлагатай. Баримтжуулсан
     хазайлт — өөр газар БҮҮ ашигла. */
  --zen-status-followup: #7c5aa0;

  /* Картын градиент — code.html-д байсан, DESIGN.md-д байхгүй */
  --zen-grad-test-a: #f1f5e8;
  --zen-grad-test-b: #e3edd3;
  --zen-grad-care-a: #fff9ef;
  --zen-grad-care-b: #f3e6d5;
  --zen-grad-play-a: #eef9f7;
  --zen-grad-play-b: #d9f0ed;

  /* RGB триплет — rgba(var(--…), a) хэлбэрээр ашиглагддаг */
  --zen-primary-rgb: 12, 92, 86;
  --zen-primary-container-rgb: 47, 117, 110;
  --zen-error-rgb: 186, 26, 26;

  /* Үсгийн фонт. Manrope-г index.html <link>-ээр татна (style.css:53-ийн
     Inter @import-оос хоёр алхам түрүүнд олдоно). */
  --zen-font: 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Радиус — DESIGN.md-ийн rounded scale */
  --zen-r-sm: 0.5rem;
  --zen-r: 1rem;
  --zen-r-md: 1.5rem;
  --zen-r-lg: 2rem;
  --zen-r-xl: 3rem;
  --zen-r-full: 9999px;

  /* Гүн — сүүдэр нь цэвэр хар БИШ, бор (tertiary) өнгөөр будагдсан.
     DESIGN.md: «shadow color is a dark brown/tertiary tint rather than pure
     black to maintain the warm aesthetic». */
  --zen-shadow-sm: 0 1px 2px rgba(44, 22, 3, 0.06);
  --zen-shadow: 0 4px 20px rgba(44, 22, 3, 0.10);
  --zen-shadow-lg: 0 12px 40px rgba(44, 22, 3, 0.16);

  /* ══ PT ALIAS — доорх мөрүүдэд ЛИТЕРАЛ ӨНГӨ БАЙЖ БОЛОХГҮЙ ═══════ */

  /* Brand */
  --pt-primary: var(--zen-primary);
  --pt-primary-hover: var(--zen-on-primary-fixed-variant);
  --pt-primary-rgb: var(--zen-primary-rgb);
  --pt-primary-tint: rgba(47, 117, 110, 0.10);
  --pt-primary-ring: rgba(47, 117, 110, 0.14);

  /* Surfaces */
  --pt-surface: var(--zen-surface-lowest);
  --pt-surface-muted: var(--zen-surface-low);
  --pt-surface-dim: var(--zen-surface-container);
  --pt-surface-border: var(--zen-outline-variant);
  --pt-surface-border-soft: rgba(190, 201, 198, 0.7);
  --pt-bg-app: var(--zen-surface);

  /* Text */
  --pt-on-surface: var(--zen-on-surface);
  --pt-on-surface-secondary: var(--zen-on-surface-variant);
  --pt-on-surface-muted: var(--zen-on-surface-muted);
  --pt-on-surface-faint: rgba(30, 28, 13, 0.35);

  /* Status. «confirmed» нь дүүргэлт дээр биш текст дээр их гардаг тул
     primary (тод) хувилбарыг авав. */
  --pt-status-confirmed: var(--zen-primary);
  --pt-status-confirmed-bg: rgba(47, 117, 110, 0.10);
  --pt-status-soon: var(--zen-tertiary);
  --pt-status-soon-bg: var(--zen-tertiary-fixed);
  --pt-status-live: var(--zen-error);
  --pt-status-live-bg: var(--zen-error-container);
  --pt-status-followup: var(--zen-status-followup);
  --pt-status-followup-bg: rgba(124, 90, 160, 0.10);
  --pt-status-past: var(--zen-outline);
  --pt-status-past-bg: var(--zen-surface-high);
  /* cancelled ба live хоёр Zen-д ижил улаан руу буудаг тул тэднийг
     ДҮҮРГЭЛТЭЭР нь ялгана: live = улаан дэвсгэр, cancelled = саарал дэвсгэр. */
  --pt-status-cancelled: var(--zen-error);
  --pt-status-cancelled-bg: var(--zen-surface-high);

  /* Typography */
  --pt-font: var(--zen-font);

  /* Радиус — Zen илүү дугуй. sm-ээс бусад нь өсөв. */
  --pt-radius-sm: var(--zen-r-sm);
  --pt-radius: var(--zen-r);
  --pt-radius-md: var(--zen-r);
  --pt-radius-lg: var(--zen-r-md);
  --pt-radius-xl: var(--zen-r-md);
  --pt-radius-xxl: var(--zen-r-lg);
  --pt-radius-full: var(--zen-r-full);

  /* Elevation */
  --pt-shadow-1: var(--zen-shadow-sm), var(--zen-shadow);
  --pt-shadow-1-hover: var(--zen-shadow);
  --pt-shadow-2: var(--zen-shadow);
  --pt-shadow-pop: var(--zen-shadow-lg);

  /* Layout. header-ийн өндөр 64→72; AppShell нь paddingTop-оо энэ
     хувьсагчаас авдаг тул хуудсууд өөрсдөө нэмэлт зай тавихгүй. */
  --pt-header-h: 72px;
  --pt-container-max: 1200px;
  --pt-gutter: 20px;

  /* Zen-ийн зайн хувьсагчид. Эдгээр нь өмнө нь ЗӨВХӨН `.zen`-д (landing/zen.css)
     зарлагдсан байсан бөгөөд app shell нь `.zen` класс хэрэглэдэггүй. Улмаас
     `.zen`-ээс гадна ашигласан газар бүрд `var(--zen-margin)` зэрэг нь ХҮЧИНГҮЙ
     болж, `gap: normal` (=0), `max-width: none` гэж тооцогдож байв — тоглоомын
     kit дээр grid-ийн зай алга болсныг амьд DOM дээр хэмжиж баталсан.
     `.zen` дотор ижил утгыг дахин зарладаг тул landing-д өөрчлөлт гарахгүй. */
  --zen-gutter: 24px;
  --zen-margin: 20px;
  --zen-container: var(--pt-container-max);
  --zen-header-h: var(--pt-header-h);
}