/* ==========================================================================
   base.css — reset, typography, Thai tuning, utilities
   ========================================================================== */

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

html{-webkit-text-size-adjust:100%}

body{
  font-family:var(--font-sans);
  font-size:var(--text-body-m);          /* CMS base steps down from mobile 16 */
  line-height:var(--lh-normal);
  color:var(--color-text);
  background:var(--color-bg-page);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{line-height:var(--lh-tight);font-weight:var(--weight-bold)}
h1{font-size:var(--text-h1)}
h2{font-size:var(--text-h2)}
h3{font-size:var(--text-h3)}
h4{font-size:var(--text-title)}

a{color:var(--ci-blue);text-decoration:none}
a:hover{text-decoration:underline}

button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
table{border-collapse:collapse;width:100%}
img{max-width:100%;display:block}

:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--radius-sm)}

/* --- Type utilities ------------------------------------------------------ */
.t-h2{font-size:var(--text-h2);font-weight:700;line-height:var(--lh-tight)}
.t-h3{font-size:var(--text-h3);font-weight:700}
.t-title{font-size:var(--text-title);font-weight:700}
.t-body{font-size:var(--text-body-m)}
.t-caption{font-size:var(--text-caption);line-height:1.5}
.t-overline{font-size:var(--text-overline);letter-spacing:.1em;text-transform:uppercase;
            font-weight:700;color:var(--color-text-muted)}
.t-num{font-variant-numeric:tabular-nums}

.muted{color:var(--color-text-muted)}
.strong{font-weight:700}
.danger{color:var(--color-danger)}
.success{color:var(--color-success)}

.gradient-text{
  background:var(--brand-gradient);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* --- Layout utilities ---------------------------------------------------- */
.row{display:flex;align-items:center;gap:var(--space-3)}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.col{display:flex;flex-direction:column}
.gap-1{gap:var(--space-1)} .gap-2{gap:var(--space-2)} .gap-3{gap:var(--space-3)}
.gap-4{gap:var(--space-4)} .gap-6{gap:var(--space-6)}
.grow{flex:1} .wrap{flex-wrap:wrap}
.mt-4{margin-top:var(--space-4)} .mt-6{margin-top:var(--space-6)}
.mb-2{margin-bottom:var(--space-2)} .mb-4{margin-bottom:var(--space-4)}
.text-right{text-align:right}

/* Wide content must scroll inside itself, never the page body */
.scroll-x{overflow-x:auto;max-width:100%}

/* --- Accessibility ------------------------------------------------------- */
/* Visible to screen readers, not to sighted users. Used for table captions
   and context that the visual layout already conveys. */
.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;
}
.skip-link{
  position:absolute;left:var(--space-3);top:-100px;z-index:100;
  background:var(--color-surface);color:var(--color-text);font-weight:700;
  padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);transition:top .12s ease;
}
.skip-link:focus{top:var(--space-3);text-decoration:none}

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