:root {
  color-scheme: light;
  --ink: #18222c;
  --muted: #66727c;
  --paper: #f3f0ea;
  --paper-bright: #fbfaf7;
  --line: #d7d9d5;
  --navy: #142735;
  --navy-deep: #0c1c28;
  --cobalt: #2367d1;
  --cobalt-dark: #184c9d;
  --danger: #b63b3b;
  --focus: #8db7ff;
  font-family: "Noto Sans Thai", "IBM Plex Sans", "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--paper); }

body { margin: 0; color: var(--ink); background: var(--paper); }

button, input { font: inherit; }

button { cursor: pointer; }

button:focus-visible, input:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.button {
  min-height: 48px;
  border: 0;
  border-radius: 8px;
  padding: 0 20px;
  font-weight: 700;
  transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:disabled { cursor: wait; opacity: 0.72; }
.button-primary { color: #fff; background: var(--cobalt); box-shadow: 0 10px 20px rgba(35, 103, 209, 0.18); }
.button-primary:hover:not(:disabled) { background: var(--cobalt-dark); box-shadow: 0 12px 24px rgba(35, 103, 209, 0.25); }
.button-secondary { color: var(--ink); background: #e4e7e4; }
.button-secondary:hover:not(:disabled) { background: #d6dbd9; }