:root {
  --led-blue: #133C82;          /* น้ำเงินกรม (หลัก) */
  --led-blue-dark: #0F2F66;
  --led-blue-light: #1F58B0;
  --led-pink: #E7258A;
   --led-pink-dark: #A8164E;
   --led-pink-light: #1F58B0;
  
 /* ===============================
     BACKGROUND
     =============================== */
  --led-bg: #FFFFFF;         
  --card-bg: #FFFFFF;
  
/* ===============================
     LIVE / STATUS
     =============================== */
  --live-red: #E53935;          /* LIVE */
  --live-off: #374151;
  
  /* ===============================
     TEXT
     =============================== */
  --text-main: #1F2933;
  --text-live: #133C82;
  --text-muted: #6B7280;
  
/* ===============================
     UI
     =============================== */
  --border-soft: #E5E7EB;
  --radius-lg: 16px;
  --vh: 1vh;
  
    /* ===============================
     ACCENT (ใช้น้อย!)
     =============================== */
  --accent-soft: rgba(19,60,130,.08);
}

* {
  box-sizing: border-box;
}

/* BASE – MOBILE FIRST */
html {
  font-size: clamp(0.95rem, 2.5vw, 1.1rem);
}

html, body {
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Kanit", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--led-bg);
  color: var(--text-main);
}

/* TABLET */
@media (min-width: 768px) {
  html {
    font-size: clamp(0.9rem, 1.6vw, 1.3rem);
  }
}

/* DESKTOP */
@media (min-width: 1200px) {
  html {
    font-size: 1rem;
  }
}

a {
  color: inherit;
  text-decoration: none;
}