/* ============================================================
   dhg-glass · PROTO TOKENS  (production · home-lg / page 84)
   Premium Liquid Glass — R2
   Source of truth: agents/ui-ux/DESIGN-DIRECTION.md §2–§3
   ============================================================ */

body.dhg-proto {
  /* ---- ink ---- */
  --dhg-ink:        #0B1220;
  --dhg-ink-2:      #1E293B;
  --dhg-ink-3:      #334155;
  --dhg-ink-4:      #475569;   /* ใช้เฉพาะบนพื้น S3/S4 เท่านั้น */

  /* ---- hue (aurora anchors) ---- */
  --dhg-blue:       #1E40AF;
  --dhg-blue-vivid: #1D4ED8;
  --dhg-violet:     #5B21B6;
  --dhg-violet-deep:#4C1D95;
  --dhg-teal:       #134E4A;

  /* aurora trio — ใช้เป็นแสงเท่านั้น (ไม่ใช้เป็นสีตัวอักษร) */
  --dhg-aur-blue:   #1D4ED8;
  --dhg-aur-violet: #7C3AED;
  --dhg-aur-cyan:   #22D3EE;

  /* accent ที่อ่านออกบนพื้นกระจก (WCAG ≥4.5:1) */
  --dhg-accent-1:   #1D4ED8;   /* blue-vivid  */
  --dhg-accent-2:   #6D28D9;   /* violet-700  */
  --dhg-accent-3:   #0E7490;   /* cyan-700    */
  --dhg-accent-4:   #1E40AF;   /* blue-800    */

  /* ---- glass surfaces — 3 ชั้น (fill .76/.60 ตามที่อนุมัติ) ----
     ชั้นแรก = ฟิล์มขาว, ชั้นถัดไป = tint จากแสงออโรรา
     ทำให้กระจก "มีสี" แทนที่จะเป็นกล่องขาวทึบ               */
  --dhg-glass-nav:  linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.74));
  --dhg-glass-nav-s:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.88));
  --dhg-glass-card: linear-gradient(135deg, rgba(255,255,255,.70), rgba(255,255,255,.50));
  --dhg-glass-soft: linear-gradient(135deg, rgba(255,255,255,.46), rgba(255,255,255,.30));
  --dhg-glass-chip: linear-gradient(135deg, rgba(255,255,255,.80), rgba(255,255,255,.66));

  /* tint ใต้ฟิล์ม — ให้ glass อ่านว่าหักเหแสงจริง */
  --dhg-tint-blue:   radial-gradient(120% 110% at 0% 0%,   rgba(29,78,216,.20),  transparent 58%);
  --dhg-tint-violet: radial-gradient(120% 110% at 100% 0%, rgba(124,58,237,.17), transparent 60%);
  --dhg-tint-cyan:   radial-gradient(120% 110% at 100% 100%,rgba(34,211,238,.16), transparent 62%);

  /* ---- specular (อ่านว่า "กระจก") ---- */
  --dhg-spec-top:   inset 0 1px 0 rgba(255,255,255,.95);
  --dhg-spec-bot:   inset 0 -1px 0 rgba(255,255,255,.42);
  --dhg-rim-ring:   inset 0 0 0 1px rgba(255,255,255,.62);
  --dhg-rim-grad:   linear-gradient(158deg,
                      rgba(255,255,255,.96) 0%,
                      rgba(255,255,255,.65) 34%,
                      rgba(255,255,255,.88) 68%,
                      rgba(255,255,255,.99) 100%);
  --dhg-rim-refract:linear-gradient(158deg,
                     rgba(147,197,253,.95) 0%,
                     rgba(255,255,255,.70) 30%,
                     rgba(196,181,253,.85) 66%,
                     rgba(255,255,255,.99) 100%);
  --dhg-sheen:      linear-gradient(45deg,
                      rgba(255,255,255,.52) 0%,
                      rgba(255,255,255,0)   30%,
                      rgba(255,255,255,0)   70%,
                      rgba(255,255,255,.24) 100%);
  --dhg-catch:      radial-gradient(56% 44% at 20% 0%, rgba(255,255,255,.92), rgba(255,255,255,0) 72%);

  /* ---- edges ---- */
  --dhg-rim:        rgba(255,255,255,.92);
  --dhg-rim-soft:   rgba(255,255,255,.55);
  --dhg-hairline:   rgba(11,18,32,.07);
  --dhg-rim-dark:   rgba(11,18,32,.10);

  /* ---- gradients ---- */
  --dhg-grad-text:  linear-gradient(100deg, #1D4ED8 0%, #6D28D9 52%, #0E7490 100%);
  --dhg-grad-cta:   linear-gradient(135deg, #1D4ED8, #0F5FA8);

  /* ---- shadows: โทนเย็น (ม่วง/ฟ้า) ให้ลอยมี depth ---- */
  --dhg-shadow-1:   0 1px 2px rgba(10,20,50,.05),
                    0 10px 24px -14px rgba(29,78,216,.34);
  --dhg-shadow-2:   0 2px 4px rgba(10,20,50,.05),
                    0 18px 36px -18px rgba(29,78,216,.42),
                    0 30px 64px -34px rgba(124,58,237,.32);
  --dhg-shadow-3:   0 6px 10px -8px rgba(10,20,50,.08),
                    0 28px 56px -24px rgba(29,78,216,.46),
                    0 44px 88px -40px rgba(124,58,237,.38);
  --dhg-shadow-cta: 0 10px 24px -8px rgba(29,78,216,.50), inset 0 1px 0 rgba(255,255,255,.55);
  --dhg-inner-glass: inset 0 1px 0 rgba(255,255,255,.98),
                     inset 0 0 0 1px rgba(255,255,255,.42),
                     inset 0 -1px 0 rgba(255,255,255,.55),
                     inset 0 -30px 40px -26px rgba(29,78,216,.20),
                     inset 26px 0 34px -30px rgba(124,58,237,.16);
  --dhg-glow-rim:   0 0 0 1px rgba(255,255,255,.85),
                    0 0 22px -4px rgba(124,58,237,.40),
                    0 18px 34px -18px rgba(29,78,216,.48);

  /* ---- tint ต่อหมวดลิงก์ (tile) ---- */
  --dhg-tile-1:     rgba(245,158,11,.17);  /* ระบบภายในหน่วยงาน */
  --dhg-tile-2:     rgba(16,185,129,.16);  /* ระบบรายงาน */
  --dhg-tile-3:     rgba(59,130,246,.17);  /* เอกสาร/คู่มือ */
  --dhg-tile-ico-1: rgba(245,158,11,.26);
  --dhg-tile-ico-2: rgba(16,185,129,.24);
  --dhg-tile-ico-3: rgba(59,130,246,.26);

  /* ---- spacing (4px base) ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10:128px;

  /* ---- radii ---- */
  --r-chip: 999px;
  --r-card: 24px;
  --r-panel: 20px;
  --r-tile: 16px;

  /* ---- rhythm ---- */
  --sec-y: 64px;
  --maxw: 1120px;

  /* ---- motion ---- */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --dur-fast: 120ms;
  --dur-mid:  220ms;

  /* optical: แสงมาจากทิศเดียวทั้งเว็บ (45°) */
  --light-dir: 45deg;
}

@media (max-width: 767px) {
  body.dhg-proto { --sec-y: 40px; --r-card: 20px; }
}