/* ==========================================================================
   โต๊ะทบทวน — Design tokens
   "Iris & Graphite": graphite ที่มี undertone ม่วงเล็กน้อย + ม่วง iris
   ที่อมฝุ่น (ไม่ใช่ม่วงไฟฟ้าแบบ SaaS) ใช้ร่วมกันทุกหน้า
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- Base: graphite (พื้นหลังและพื้นผิว เรียงจากลึก → ยกขึ้น) ---- */
  --graphite-950: #121015;   /* พื้นหลังลึกสุด (footer, inset) */
  --graphite-900: #17151a;   /* พื้นหลังหลักของหน้า */
  --graphite-850: #1d1a21;   /* surface: การ์ด, accordion */
  --graphite-800: #242028;   /* surface ยก: hover, header ของตาราง */
  --graphite-750: #2c2731;   /* surface สูงสุด: chip, input */

  /* ---- Accent: iris (ม่วงหลัก) ---- */
  --iris-200: #ddd1f7;       /* ข้อความเน้นบนพื้นเข้ม */
  --iris-300: #c6b3ef;       /* ลิงก์, ตัวเลขสำคัญ */
  --iris-400: #ab92e6;       /* ปุ่มหลัก, focus ring, indicator */
  --iris-500: #8e71d3;       /* เส้นขอบ active, กราฟิก */
  --iris-600: #6e55ae;       /* hover ของเส้น, เงาม่วง */
  --iris-800: #372b52;       /* พื้นเน้นแบบ tint */
  --iris-900: #241d33;       /* พื้นเน้นอ่อนมาก (selected option) */

  /* ---- Text ---- */
  /* คอนทราสต์ (WCAG) วัดบน graphite-900 / graphite-800 */
  --text: #ece8f1;           /* เนื้อหาหลัก  15.0:1 */
  --text-muted: #aaa2b4;     /* คำอธิบายรอง 7.4:1 / 6.5:1 */
  --text-faint: #918a9b;     /* caption, label เล็ก 5.5:1 / 4.8:1 */
  --text-on-accent: #16131b; /* ข้อความบนปุ่ม iris-400 7.0:1 */

  /* ---- Border ---- */
  --border-subtle: #2a2630;
  --border: #37323e;
  --border-strong: #4b4455;

  /* ---- Semantic (เฉลย quiz) — ปรับโทนให้เข้ากับ graphite ---- */
  --success: #7fcfa6;
  --success-bg: #17271f;
  --success-border: #3c6e55;
  --danger: #ef9a9a;
  --danger-bg: #2c1a1d;
  --danger-border: #7a3c43;
  --warn: #e6c27a;
  --warn-bg: #28221a;
  --warn-border: #5a4a2c;

  /* ---- Typography ---- */
  /* หัวข้อ: Bricolage (ละติน) + Plex Sans Thai แบบไม่มีหัว (ไทย)
     เนื้อหา: Plex Sans Thai Looped แบบมีหัว อ่านย่อหน้ายาวๆ ได้สบายตากว่า */
  --font-display: "Bricolage Grotesque", "IBM Plex Sans Thai", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Thai Looped", "IBM Plex Sans Thai", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "IBM Plex Sans Thai", ui-monospace, "Cascadia Mono", monospace;

  --fs-xs: 0.78rem;
  --fs-sm: 0.9rem;
  --fs-md: 1rem;
  --fs-lg: 1.15rem;
  --fs-xl: 1.4rem;
  --fs-2xl: clamp(1.6rem, 3.2vw, 2.1rem);
  --fs-hero: clamp(2.1rem, 5vw, 3.3rem);

  /* ภาษาไทยมีสระบน-ล่าง ต้องการ line-height สูงกว่าภาษาอังกฤษ */
  --lh-body: 1.75;
  --lh-tight: 1.3;

  /* ---- Space / shape ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 10px 30px -18px rgba(0, 0, 0, 0.7);
  --shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 40px -20px rgba(110, 85, 174, 0.45);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 360ms;

  --wrap: 1080px;
}