/* =====================================================================
   vstar-tokens.css — V-Star "Starlit Clay Classroom" design tokens
   แหล่งเดียวของสี ฟอนต์ เงา มุมโค้ง (single source of truth)
   - ไม่ scope กับ html.vt-theme → ใช้ได้ทั้งหน้าที่มีธีม (inc_theme.php) และหน้าเดี่ยว (login.php)
   - ห้ามประกาศค่าสีซ้ำในไฟล์อื่น ให้อ้าง var(--vt-*) เท่านั้น (ดู DESIGN.md)
   - สี *-d (deep) และ --vt-ink-2 ผ่าน WCAG AA (≥4.5:1) บนพื้น cream / paper / white
     จึงใช้เป็นตัวอักษรหรือพื้นปุ่มที่มีตัวอักษรขาวได้
   ===================================================================== */
:root {
  /* ---------- surfaces & ink ---------- */
  --vt-cream: #FBF3E8;   /* page background */
  --vt-paper: #FFFAF3;   /* cards, panels */
  --vt-ink: #4A3A2E;     /* primary text  (~10:1 on cream) */
  --vt-ink-2: #75604F;   /* secondary text (~5.4:1 on cream) */
  --vt-placeholder: #85705E; /* input placeholder on white (~4.7:1) */
  --vt-line: #EEDFCB;    /* hairlines, table borders */
  --vt-line-2: #E3D0B8;  /* input borders, dashed dividers */

  /* ---------- pastel families: base (decor) · -s soft surface · -d deep ink/fill (AA) ---------- */
  --vt-sage: #A9C9B8;   --vt-sage-s: #DCEBE2;   --vt-sage-d: #4A7560;
  --vt-peach: #F6B89C;  --vt-peach-s: #FBE1D3;  --vt-peach-d: #B04F2C;
  --vt-butter: #F7D98A; --vt-butter-s: #FCF0CC; --vt-butter-d: #8A6414;
  --vt-sky: #AFC8E0;    --vt-sky-s: #DDE8F2;    --vt-sky-d: #4A7197;
  --vt-lav: #CDB9E3;    --vt-lav-s: #EEE6F7;    --vt-lav-d: #6F5499;
  --vt-rose: #E79A9A;   --vt-rose-s: #FBE3E3;   --vt-rose-d: #B24E52;

  /* ---------- filled buttons (white text ≥4.4:1 across the whole gradient) ---------- */
  --vt-btn-peach: linear-gradient(180deg, #BC5B36 0%, #A94A29 100%);
  --vt-btn-sage: linear-gradient(180deg, #517F68 0%, #44705A 100%);
  --vt-btn-sky: linear-gradient(180deg, #5077A0 0%, #44688D 100%);
  --vt-btn-rose: linear-gradient(180deg, #BE5A5E 0%, #A94549 100%);
  --vt-btn-butter: linear-gradient(180deg, #F9E3A6 0%, #F2CD6A 100%); /* ink text, not white */

  /* ---------- soft headers / hero bands ---------- */
  --vt-hero: linear-gradient(135deg, #FAD3BF 0%, #F7C3AB 100%);
  --vt-head: linear-gradient(135deg, #FBE1D3 0%, #F6C9B2 100%);
  --vt-head-lilac: linear-gradient(135deg, #EEE6F7 0%, #DCCDEE 100%);
  --vt-head-mint: linear-gradient(135deg, #DCEBE2 0%, #BFD8CA 100%);

  /* ---------- clay depth ---------- */
  --vt-clay: 0 8px 18px -8px rgba(122, 86, 56, .35), inset 0 -4px 0 rgba(0, 0, 0, .05), inset 0 2px 0 rgba(255, 255, 255, .8);
  --vt-clay-sm: 0 4px 10px -5px rgba(122, 86, 56, .35), inset 0 -2px 0 rgba(0, 0, 0, .05), inset 0 1px 0 rgba(255, 255, 255, .7);
  --vt-clay-lg: 0 18px 40px -18px rgba(122, 86, 56, .45), 0 4px 10px -6px rgba(122, 86, 56, .25), inset 0 -5px 0 rgba(0, 0, 0, .035), inset 0 2px 0 rgba(255, 255, 255, .9);
  --vt-clay-btn: 0 10px 18px -10px rgba(169, 74, 41, .8), inset 0 -4px 0 rgba(0, 0, 0, .12), inset 0 2px 0 rgba(255, 255, 255, .3);
  --vt-inset: inset 0 3px 6px -3px rgba(122, 86, 56, .18);
  --vt-focus-ring: 0 0 0 5px rgba(169, 201, 184, .45);

  /* ---------- shape ---------- */
  --vt-r-lg: 32px;  /* hero card, login card */
  --vt-r: 24px;     /* cards */
  --vt-r-md: 18px;  /* inputs, buttons, alerts */
  --vt-r-sm: 14px;  /* small controls, chips inside fields */
  --vt-r-pill: 999px;

  /* ---------- type ---------- */
  --vt-font: 'Sarabun', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --vt-font-head: 'Mali', 'Sarabun', sans-serif;
  --vt-font-mono: ui-monospace, Consolas, 'Courier New', monospace; /* certificate IDs, hashes only */
  --vt-text-min: 14px; /* floor for any Thai UI text (tone marks need room) */

  /* ---------- motion ---------- */
  --vt-ease-out: cubic-bezier(.16, 1, .3, 1);
  --vt-dur: .18s;

  /* ---------- legacy aliases (older page CSS / rules) — do not use in new code ---------- */
  --vt-ground: var(--vt-cream);
  --vt-sky-dark: var(--vt-sky-d); --vt-sky-soft: var(--vt-sky-s); --vt-navy: var(--vt-ink); --vt-blue: var(--vt-sky-d);
  --vt-mint: var(--vt-sage-d); --vt-mint-ink: #3F6B56; --vt-mint-soft: var(--vt-sage-s);
  --vt-sun: var(--vt-butter); --vt-sun-ink: var(--vt-butter-d); --vt-sun-soft: var(--vt-butter-s);
  --vt-coral: var(--vt-rose-d); --vt-coral-ink: #9E3F43; --vt-coral-soft: var(--vt-rose-s);
  --vt-lilac: var(--vt-lav-d); --vt-lilac-soft: var(--vt-lav-s);
  --vt-shadow: var(--vt-clay);
}