/* ==========================================================================
   rachadej-ui — base.css
   reset ที่จำเป็น + typography + utility ขั้นต่ำ
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--rui-canvas);
  color: var(--rui-text);
  font-family: var(--rui-font);
  font-size: var(--rui-fs-md);
  line-height: 1.75;
}

img, svg, video { max-width: 100%; }
img, video { height: auto; display: block; }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 { margin: 0; line-height: 1.35; color: var(--rui-text-strong); font-weight: 700; }
p { margin: 0 0 var(--rui-space-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--rui-primary); }

/* โฟกัสต้องมองเห็นเสมอ — ห้ามลบโดยไม่ใส่แทน (ดู docs/design.md) */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--rui-primary);
  outline-offset: 2px;
  border-radius: var(--rui-radius-sm);
}

/* ---------- typography scale ---------- */
.rui-display { font-size: var(--rui-fs-2xl); font-weight: 800; letter-spacing: -.01em; }
.rui-h1      { font-size: var(--rui-fs-xl); font-weight: 800; }
.rui-h2      { font-size: var(--rui-fs-lg); font-weight: 700; }
.rui-h3      { font-size: var(--rui-fs-md); font-weight: 700; }
.rui-lead    { font-size: var(--rui-fs-lg); color: var(--rui-muted); }
.rui-muted   { color: var(--rui-muted); }
.rui-small   { font-size: var(--rui-fs-sm); }
.rui-eyebrow {
  font-size: var(--rui-fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rui-muted);
}
.rui-num { font-family: var(--rui-font-num); font-variant-numeric: tabular-nums; }

code.rui-code {
  font-family: var(--rui-font-num);
  font-size: .85em;
  background: var(--rui-surface-soft);
  border: 1px solid var(--rui-line);
  border-radius: 6px;
  padding: .08em .4em;
  overflow-wrap: anywhere;
}

/* ---------- utility ขั้นต่ำ ---------- */
.rui-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.rui-stack   { display: flex; flex-direction: column; gap: var(--rui-space-4); }
.rui-row     { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rui-space-3); }
.rui-between { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rui-space-3); }
.rui-grow    { flex: 1 1 auto; min-width: 0; }

.rui-shell {
  width: 100%;
  max-width: var(--rui-shell-max);
  margin-inline: auto;
  padding-inline: var(--rui-space-6);
}

@media (min-width: 1536px) {
  .rui-shell {
    max-width: var(--rui-shell-2xl);
    padding-inline: var(--rui-space-8);
  }
}

@media (max-width: 620px) {
  .rui-shell { padding-inline: var(--rui-space-4); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}