/* css/app.css — ชุดตัวแปรสี/ขนาด + ฟอนต์ ที่ใช้ร่วมกันทั้ง 3 หน้า
   (index.html, call.html, screen.html)

   เขียนแบบ Chrome 55 รันได้: ไม่มี CSS grid, ไม่มี gap, ไม่มี clamp()/min()/max(),
   ไม่มี :has() หรือ container query · CSS custom properties ใช้ได้ (Chrome 49+)

   ฟอนต์ IBM Plex Sans Thai ฝังไว้ใน fonts/ ไม่ดึงจาก CDN เพราะจอทีวีต้องอ่านออก
   แม้เน็ตที่ร้านมีปัญหา · สัญญาอนุญาต OFL 1.1 ดู fonts/OFL.txt */

/* ── ฟอนต์ ── แยก subset ไทย/ละติน เพราะตัวเลขทะเบียนอยู่ใน subset ละติน ── */
@font-face {
  font-family: 'Plex Thai';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/plexthai-400-thai.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Plex Thai';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/plexthai-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+FFFD;
}
@font-face {
  font-family: 'Plex Thai';
  font-style: normal;
  font-weight: 600;
  src: url(../fonts/plexthai-600-thai.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Plex Thai';
  font-style: normal;
  font-weight: 600;
  src: url(../fonts/plexthai-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+FFFD;
}
@font-face {
  font-family: 'Plex Thai';
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/plexthai-700-thai.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Plex Thai';
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/plexthai-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+FFFD;
}

/* ── ตัวแปรที่ใช้ร่วมกัน ── */
:root {
  /* พื้นหลังเข้ม เพราะจอทีวีเปิดทั้งวัน สว่างจ้าทั้งจอจะแสบตาและทำให้ทะเบียนเด่นน้อยลง */
  --bg:        #0a1410;
  --bg-soft:   #10211a;
  --line:      #1d3a2c;

  --ink:       #eef7f1;
  --ink-dim:   #93baa4;
  --ink-faint: #5c8570;

  --brand:     #16a34a;
  --brand-ink: #ffffff;

  /* หน้าป้ายทะเบียน — สว่างเกือบขาวเหมือนป้ายจริง ตัวหนังสือเข้ม อ่านได้ไกลสุด */
  --plate-face: #f2f6f1;
  --plate-ink:  #0b1a12;
  --plate-line: #c3d2c6;

  /* สีประจำประเภทรถ — ใช้กับขอบป้ายและป้ายชื่อประเภท */
  --veh-motorcycle: #f2a413;
  --veh-car:        #2fc25f;
  --veh-pickup:     #3aa9f0;

  /* ค่าเริ่มต้น หน้าไหนอยากเปลี่ยนตามประเภทรถให้ทับ --accent ที่ตัว element */
  --accent: var(--veh-car);

  --radius:    1.4vw;
  --radius-sm: 10px;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Plex Thai', 'IBM Plex Sans Thai', 'Noto Sans Thai',
               'Segoe UI', Tahoma, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

/* ปุ่มมาตรฐาน ใช้ซ้ำได้ในหน้าช่างและหน้าเมนู */
.btn {
  display: inline-block;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--brand-ink);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}