/* ============================================================
   tokens.css — Design Tokens (single source of truth)
   โหลดก่อน site.css เสมอ. ทุกไฟล์ CSS อ้างอิงตัวแปรที่นี่
   ============================================================ */
:root{
  /* Brand — indigo → violet */
  --brand:#6366f1;
  --brand-2:#8b5cf6;
  --brand-dark:#4f46e5;
  --brand-soft:#eef0ff;
  --brand-soft-2:#e0e2ff;
  --grad:linear-gradient(135deg,#6366f1,#8b5cf6);

  /* Ink — navy-black (header / bottom bar / immersive hero) */
  --ink:#0b1020;
  --ink-2:#141b32;
  --ink-glow:#1b2350;
  --grad-ink:linear-gradient(160deg,#0b1020 0%,#141b32 55%,#1b2350 100%);

  /* Surfaces */
  --surface:#ffffff;
  --surface-2:#f5f6fb;
  --surface-3:#eceef6;

  /* Text */
  --text:#0f172a;
  --muted:#5b6478;
  --hint:#9aa3b8;

  /* Lines */
  --line:#e6e8f2;
  --line-strong:#d6d9e8;

  /* Status */
  --ok:#10b981; --ok-soft:#dcfce7; --ok-ink:#065f46;
  --warn:#f59e0b; --warn-soft:#fef3c7; --warn-ink:#92400e;
  --danger:#ef4444; --danger-soft:#fee2e2; --danger-ink:#991b1b;
  --info:#3b82f6; --info-soft:#dbeafe; --info-ink:#1e40af;

  /* Radius */
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px; --r-pill:50px;

  /* Shadow */
  --shadow-sm:0 1px 3px rgba(15,23,42,.06);
  --shadow:0 8px 30px rgba(15,23,42,.08);
  --shadow-lg:0 18px 50px rgba(15,23,42,.14);
  --shadow-brand:0 8px 22px rgba(99,102,241,.4);

  /* Layout */
  --header-h:64px;
  --bottombar-h:64px;
  --maxw:1200px;
}