/* ==========================================================================
   Elderly-friendly UX baseline (spec section 9.4)
   Tailwind is loaded from the CDN with no build step (see ADR D2), so its
   utility classes can't be retargeted at the source. Instead we override
   the handful of type-scale and control-size utilities used throughout
   the app here, once, rather than touching every view's class list —
   exactly what section 9.4 asks for.
   ========================================================================== */
:root {
  --font-size-base: 18px;
  --min-control-height: 48px;
}

html {
  font-size: var(--font-size-base);
}

body {
  line-height: 1.65;
  letter-spacing: 0.012em;
}

/* Thai Typography & Tracking tuning */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.01em;
}

.tracking-tight {
  letter-spacing: -0.008em !important;
}

/* Nothing in the app should render below the 14px floor. */
.text-\[10px\],
.text-\[11px\] {
  font-size: 14px !important;
}

.text-xs {
  font-size: 15px !important;
}

.text-sm {
  font-size: 17px !important;
}

.text-base {
  font-size: 18px !important;
}

.text-lg {
  font-size: 20px !important;
}

.text-xl {
  font-size: 24px !important;
}

.text-2xl {
  font-size: 28px !important;
}

.text-3xl {
  font-size: 32px !important;
}

/* Contrast: slate-400/500 on white read under the 4.5:1 minimum the spec
   calls for. Darken them everywhere rather than hunting every usage. */
.text-slate-400 {
  color: #64748b !important;
}

.text-slate-500 {
  color: #475569 !important;
}

/* Comfortable tap targets — real form controls and buttons */
button,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  min-height: var(--min-control-height);
}

/* Standardized Input Border, Hover & Focus States */
input:not([type="checkbox"]):not([type="radio"]):not(.paper-input),
select,
textarea {
  border: 1px solid #cbd5e1;
  border-radius: 0.75rem;
  padding: 0.625rem 0.875rem;
  background-color: #ffffff;
  color: #0f172a;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

input:not([type="checkbox"]):not([type="radio"]):not(.paper-input):hover,
select:hover,
textarea:hover {
  border-color: #94a3b8;
}

input:not([type="checkbox"]):not([type="radio"]):not(.paper-input):focus,
select:focus,
textarea:focus {
  border-color: #4f46e5 !important;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12) !important;
  outline: none !important;
}

input[type="checkbox"],
input[type="radio"] {
  width: 22px;
  height: 22px;
  border-radius: 0.375rem;
  border: 1.5px solid #cbd5e1;
  accent-color: #4f46e5;
  cursor: pointer;
}

/* Standard Card Styles */
.card,
.bg-white.rounded-2xl {
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.03);
}

/* Custom Paper Sheet Styles */
.paper-sheet {
  background-color: #ffffff;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.06), 0 4px 12px -2px rgba(0, 0, 0, 0.03);
  border: 1px solid #cbd5e1;
  border-radius: 1.25rem;
  position: relative;
}

.paper-dotted-line {
  border-bottom: 2px dotted #cbd5e1;
}

.paper-input {
  background: transparent;
  border: none;
  border-bottom: 2px dotted #94a3b8;
  border-radius: 0;
  padding: 0.35rem 0.5rem;
  outline: none;
  transition: all 0.2s ease-in-out;
}

.paper-input:focus {
  border-bottom-color: #4f46e5;
  border-bottom-style: solid;
  background: rgba(238, 242, 255, 0.5);
}

.ajax-loading {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
}