/* =========================================================
   สมุดร้านเกมส์ รุ่น 2 — Design tokens · ค่าตรงกับ redesign_v2/DESIGN.md (ห้ามใช้ค่านอกไฟล์นี้)
   ต่อยอดจาก ../../site/css/tokens.css (สีหลักไม่เปลี่ยน) · เพิ่ม --color-loss, --header-h
   ฟอนต์: IBM Plex Sans Thai 400/500/600/700 (Google Fonts, display=swap)
   ========================================================= */
:root{
  /* ---------- สี (ค่าความต่างสีตรวจ WCAG แล้ว · เทียบกับ --color-bg) ---------- */
  --color-bg:#0A0D1A;            /* พื้นหลัก */
  --color-bg-raised:#0E1226;     /* พื้น section ที่ต้องการแยกชั้น */
  --color-surface:#121731;       /* พื้นการ์ดทึบ */
  --color-glass:rgba(255,255,255,.04);   /* พื้นการ์ดกระจก */
  --color-line:rgba(255,255,255,.08);    /* เส้นขอบ 1px */
  --color-line-strong:rgba(255,255,255,.14);
  --color-text:#ECEEF8;          /* 16.7:1 */
  --color-muted:#A0A6C3;         /* 8.0:1 — ตัวอักษรรอง */
  --color-accent:#6C5CE7;        /* ปุ่มหลัก · ตัวอักษรขาวบนปุ่ม 4.9:1 */
  --color-accent-hover:#7A6BF0;
  --color-accent-text:#A99CFF;   /* 8.2:1 — ลิงก์/ตัวเลขหัวข้อบนพื้นมืด (ห้ามใช้ #6C5CE7 เป็นสีตัวอักษร) */
  --color-accent-glow:#8B7DF5;   /* ใช้เฉพาะแสงไล่เฉด */
  --color-profit:#34D399;        /* 10.1:1 — กำไร/ได้เงินแล้ว (สีเดียวกับความหมายในโปรแกรม) */
  --color-pending:#FBBF24;       /* 11.6:1 — รอเงิน/ค้าง */
  --color-info:#60A5FA;          /* แสงรองมุมบน */
  --color-loss:#F87171;         /* แบบเดิม ✕ / ขาดทุน (ใหม่ในรุ่น 2) */
  --color-on-accent:#FFFFFF;

  /* ไล่เฉดที่อนุญาต (มีแค่ 3 ตัวนี้) */
  --grad-headline:linear-gradient(90deg,#FFFFFF 0%,#C7BEFF 45%,#8B7DF5 100%);
  --grad-glow:radial-gradient(700px 420px at 78% 58%,rgba(108,92,231,.30),transparent 65%);
  --grad-card:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));

  /* ---------- ฟอนต์ ---------- */
  --font-sans:'IBM Plex Sans Thai','Noto Sans Thai',system-ui,sans-serif;
  --font-mono:ui-monospace,Consolas,monospace;
  --fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;

  /* ขนาดตัวอักษร (มือถือ → คอม ปรับเองตามจอ) · ภาษาไทยต้องมี line-height ≥ 1.2 สำหรับหัวข้อ */
  --fs-display:clamp(2.5rem,1.6rem + 3.6vw,4.25rem); /* 40 → 68 · H1 hero */
  --fs-h2:clamp(1.875rem,1.4rem + 1.9vw,2.75rem);    /* 30 → 44 */
  --fs-h3:clamp(1.25rem,1.1rem + .6vw,1.5rem);       /* 20 → 24 */
  --fs-lead:clamp(1.0625rem,1rem + .3vw,1.25rem);    /* 17 → 20 · sub ใต้หัวข้อ */
  --fs-body:1.0625rem;  /* 17 */
  --fs-small:.875rem;   /* 14 */
  --fs-label:.8125rem;  /* 13 · ป้ายเล็กเหนือหัวข้อ (ห้ามเล็กกว่านี้) */
  --fs-stat:clamp(1.75rem,1.4rem + 1.4vw,2.5rem);    /* 28 → 40 · ตัวเลขใหญ่ */
  --lh-display:1.2;--lh-heading:1.3;--lh-body:1.7;
  --ls-display:-.01em;--ls-label:.12em;

  /* ---------- ระยะห่าง (ฐาน 4 / 8pt) ---------- */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;
  --space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--space-32:128px;
  --section-y:clamp(64px,8vw,128px);   /* ระยะบน-ล่างของ section */
  --container:1200px;--container-pad:clamp(16px,4vw,32px);

  /* ---------- มุมโค้ง ---------- */
  --radius-sm:8px;      /* ป้าย ชิป เล็ก */
  --radius-btn:10px;    /* ปุ่ม */
  --radius-md:12px;     /* กรอบภาพหน้าจอ กล่องไอคอน */
  --radius-card:16px;   /* การ์ด */
  --radius-lg:24px;     /* กรอบ section ใหญ่ */
  --radius-pill:999px;  /* ป้ายแคปซูล สวิตช์ */

  /* ---------- เงา / แสง ---------- */
  --shadow-card:inset 0 1px 0 rgba(255,255,255,.05);
  --shadow-btn:inset 0 1px 0 rgba(255,255,255,.25),0 8px 24px -8px rgba(108,92,231,.8);
  --shadow-btn-hover:inset 0 1px 0 rgba(255,255,255,.3),0 14px 32px -10px rgba(108,92,231,.95);
  --shadow-shot:0 0 0 1px rgba(255,255,255,.1),0 40px 80px -24px rgba(0,0,0,.8),0 0 120px -20px rgba(108,92,231,.5);
  --shadow-pop:0 24px 48px -16px rgba(0,0,0,.6);
  --blur-glass:12px;

  /* ---------- การเคลื่อนไหว ---------- */
  --dur-fast:150ms;     /* hover สี */
  --dur-base:220ms;     /* ปุ่มยก การ์ดยก */
  --dur-slow:480ms;     /* เผยเนื้อหาตอนเลื่อน */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --lift:-2px;          /* ระยะยกเมื่อ hover */

  /* ---------- ชั้นซ้อน ---------- */
  --z-base:1;--z-sticker:3;--z-header:50;--z-floating-cta:60;

  /* ---------- ขนาดแตะ ---------- */
  --header-h:64px;
  --tap-min:44px;--btn-h:50px;--btn-h-sm:42px;

  /* ไอคอน Lucide */
  --icon-size:20px;--icon-stroke:1.5;
}

/* breakpoints (CSS ตัวแปรใช้ใน @media ไม่ได้ — ใช้ค่าเหล่านี้ตรง ๆ)
   --bp-sm: 560px   มือถือ → มือถือใหญ่
   --bp-md: 1000px  แท็บเล็ต → คอม (hero 2 คอลัมน์เริ่มที่นี่)
   --bp-lg: 1280px  จอกว้าง
   ทดสอบที่ 390 / 768 / 1440 ทุกครั้ง (skill qa-site) */

@media (prefers-reduced-motion:reduce){
  :root{--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms;--lift:0px}
}