/* lucky-number tokens.css (v0.8.0 · แผน docs/plan-redesign-v080.md ข้อ 6.1 6.2 · ค่าจากแบบ docs/design/v080) */

/* ---------- ฟอนต์ self-host (OFL 1.1 · subset ไทย + ละตินพื้นฐาน · ไฟล์มีเลขรุ่น) ---------- */
@font-face {
  font-family: "Noto Serif Thai";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/notoserifthai-500-v1.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Serif Thai";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/notoserifthai-700-v1.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans Thai";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/notosansthai-400-v1.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans Thai";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/notosansthai-500-v1.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans Thai";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/notosansthai-700-v1.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/cormorantgaramond-500-v1.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/cormorantgaramond-600-v1.woff2") format("woff2");
}

:root {
  color-scheme: dark;

  /* UI v3 รอบ 1 (2026-10-29): ชุดสีจากแบบ Main.dc.html "ตัวเลขและดวงดาว" · คอนทราสต์คำนวณจริงอยู่ใน PROJECT.md changelog
     สีพื้น (ไม่มีขาวล้วน ดำล้วน) */
  --ground: #0C0A1A;
  --surface: #15112A;           /* การ์ด แผง */
  --surface-glass: rgba(21, 17, 42, 0.95);
  --surface-2: #1C1736;         /* ชิป แถวรอง ไล่สีการ์ด */
  --panel: #2A2350;             /* เส้นขอบการ์ด เส้นคั่นรายการ */
  --line: #3A3168;              /* ขอบปุ่มรอง/ชิป (ตกแต่ง) */
  --line-input: #6A5FA8;        /* ขอบช่องกรอก ≥ 3:1 บนพื้น (มติ E13) */
  --line-2: #4A3A8A;            /* ขอบการ์ดเด่น (การ์ดเช็คเร็ว) */
  --line-soft: rgba(179, 156, 245, 0.18);

  /* ตัวอักษร (≥ 4.5:1 ทุกคู่ · เพดานความสว่าง ~#E4E2EE ตาม v0.27.3 "แสบตา") */
  --ink-strong: #E4E0F0;
  --ink: #E3DDF2;
  --ink-2: #BAB2D6;
  --muted: #A39BC6;
  --muted-2: #A897E0;           /* eyebrow หัวกลุ่ม */
  --placeholder: #8F87BA;

  /* พื้นสว่าง (skip-link ปุ่มภาษาที่เลือก) */
  --fill-light: #E3DDF2;
  --fill-light-hover: #D3CBEB;

  --violet: #7B5CE6;            /* เส้น ไอคอน วงเลข ไม่ใช้เป็นสีตัวอักษร */
  --violet-ink: #B39CF5;        /* ลิงก์ เลขลำดับ */
  --violet-soft: #D3CBEB;       /* ลิงก์ hover */
  --violet-dim: #33275F;        /* แท็บ/ชิปที่เลือก */
  --violet-edge: #6A4FD0;

  /* สีหลัก = ทอง (ปุ่มหลัก โฟกัส ตัวเลขเด่น) */
  --gold: #EBB869;
  --gold-2: #F3CB86;
  --gold-hover: #F3CB86;
  --gold-dim: #3D2A16;
  --gold-dim-2: #5A3F22;
  --on-gold: #0C0A1A;

  --warn: #F5B86B;
  --warn-dim: #3D2A16;
  --warn-edge: #5A3F22;
  --pass: #7DD3FC;
  --pass-dim: #1B2E3F;
  --pass-edge: #28435A;
  --fail: #F5B86B;          /* ระวัง/ไม่ผ่านใช้สีเดียวกับแบบ ต่างด้วยไอคอน */

  /* ตัวอักษร */
  --font-han: "Noto Sans CJK SC", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC";
  --font-display: "Noto Serif Thai", "Noto Sans Thai", serif;
  --font-body: "Noto Sans Thai", system-ui, "Thonburi", "Leelawadee UI", var(--font-han), sans-serif;
  --font-num: "Cormorant Garamond", "Noto Sans Thai", serif;

  --text-xs: 0.75rem;     /* 12 */
  --text-sm: 0.8125rem;   /* 13 */
  --text-md: 0.875rem;    /* 14 */
  --text-base-s: 0.9375rem; /* 15 */
  --text-base: 1rem;      /* 16 */
  --text-lg: 1.125rem;    /* 18 */
  --text-xl: 1.3125rem;   /* 21 */
  --text-2xl: 1.625rem;   /* 26 */
  --text-3xl: 1.875rem;   /* 30 */
  --text-hero: 2.25rem;   /* 36 (UI v3) */

  /* ระยะ 4/8/12/16/24/32/48 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;

  --radius-sm: 12px;
  --radius: 14px;
  --radius-md: 16px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  --shadow-glow: 0 0 60px rgba(123, 92, 230, 0.2);
  --shadow-gold: 0 0 24px rgba(235, 184, 105, 0.35);
  --glow-1: radial-gradient(circle at 50% 14%, rgba(123, 92, 230, 0.42), rgba(74, 45, 176, 0.18) 30%, rgba(42, 26, 110, 0) 55%);
  --glow-2: radial-gradient(circle at 10% 8%, rgba(176, 92, 200, 0.22), rgba(176, 92, 200, 0) 40%), radial-gradient(circle at 92% 40%, rgba(59, 107, 214, 0.18), rgba(59, 107, 214, 0) 40%);

  --speed: 150ms;
  --wrap: 1120px;
  --wrap-doc: 720px;
  --gutter: 20px; /* UI v3 ปิดช่องว่าง: ทุกแบบใช้ขอบ 20px ที่ 390 */
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--ground);
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  font-weight: 400;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
ul, ol { padding: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
img, svg { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
table { border-collapse: collapse; }

.num,
.mono {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums lining-nums;
}

.han { font-family: var(--font-han), var(--font-body); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

[hidden] { display: none !important; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}