/* Hallmark · macrostructure: Bento Grid · tone: corporate-scientific · anchor hue: navy
 * theme: studied-DNA (source: https://www.croda.com)
 * · macrostructure: Bento Grid · F1 Bento knobs: tiles=9, spans=irregular, accent=corner-only
 * · theme: studied-DNA (source: https://www.croda.com)
 * · paper oklch(98% 0.004 257) · accent oklch(37.5% 0.118 257.1) navy — user pivot 2026-08-20 (was forest-green #004438, now secondary)
 * · display: neutral grotesque (Raleway candidate — overridden by AGENTS.md to Prompt) · body: neutral grotesque (Noto Sans Thai per AGENTS.md)
 * · rhythm: unknown (URL mode)
 * · nav: N11 Mega-menu · footer: Ft3 Index columns
 * · enrichment: none (typography only)
 * · states: default · hover · focus · active · disabled
 * · contrast: pass (40–41)
 * · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30)
 * · mobile: pass (34, 49, 50–57)
 */

:root {
  /* ── Palette: studied-DNA from croda.com — primary pivoted to navy ── */
  --color-paper:        oklch(98% 0.004 257);      /* near-white, cool blue tint */
  --color-paper-2:      oklch(95.5% 0.014 231.2);  /* e7f2f8 — cool blue-grey */
  --color-paper-3:      oklch(96.5% 0.008 145.5);  /* f0f5f0 — soft green-white */
  --color-paper-4:      oklch(95.4% 0.021 106.8);  /* f1f1e1 — warm cream */
  --color-rule:         oklch(88% 0.008 257);      /* hairline, tinted */
  --color-neutral:      oklch(56% 0.008 257);      /* mid grey, blue-tinted */
  --color-muted:        oklch(40% 0.008 257);      /* darker muted */
  --color-ink:          oklch(18% 0.010 257);       /* deep navy-ink */
  --color-accent:       oklch(37.5% 0.118 257.1);   /* #0E3F7E deep navy — primary */
  --color-accent-ink:   oklch(98% 0.004 257);       /* paper on accent */
  --color-accent-2:     oklch(34.5% 0.065 176.0);   /* #004438 forest green — secondary */
  --color-accent-2-ink: oklch(98% 0.004 145);
  --color-focus:        oklch(58% 0.18 257);       /* focus ring, navy family */
  --color-error:        oklch(58% 0.20 25);
  --color-error-ink:    oklch(98% 0.004 145);
  --color-success:      oklch(55.6% 0.118 131.6);  /* #598131 */
  --color-success-ink:  oklch(98% 0.004 145);

  /* ── On-dark ink levels (navy anchor 257 / green secondary 176) ── */
  --color-on-accent:        oklch(90% 0.015 257);   /* lede text on accent fill */
  --color-on-accent-soft:   oklch(85% 0.03 257);    /* stat labels on accent */
  --color-on-accent-line:   oklch(48% 0.05 257);    /* borders on accent */
  --color-on-accent-deep:   oklch(31% 0.09 257);    /* hover fill on accent */
  --color-on-accent-pop:    oklch(85% 0.06 200);    /* light blue pop on navy */
  --color-on-navy-soft:     oklch(85% 0.02 176);    /* text on green tile */
  --color-on-navy:          oklch(90% 0.015 176);
  --color-on-navy-line:     oklch(80% 0.03 176);
  --color-on-ink:           oklch(85% 0.012 257);   /* footer body */
  --color-on-ink-2:         oklch(75% 0.015 257);   /* footer links */
  --color-on-ink-3:         oklch(70% 0.015 257);   /* footer secondary */
  --color-on-ink-4:         oklch(65% 0.018 257);   /* footer sub */
  --color-on-ink-5:         oklch(62% 0.018 257);   /* footer bottom */
  --color-on-ink-line:      oklch(28% 0.025 257);   /* footer divider */

  /* ── Typography ── */
  --font-display: "Prompt", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif;

  --text-xs:   0.64rem;
  --text-sm:   0.8rem;
  --text-base: 1rem;
  --text-md:   1.25rem;
  --text-lg:   1.5625rem;
  --text-xl:   1.9531rem;
  --text-2xl:  2.4414rem;
  --text-3xl:  3.0518rem;
  --text-4xl:  3.8147rem;
  --text-display:   clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-display-s: clamp(2.25rem, 4vw + 0.75rem, 3.75rem);

  /* ── Space ── */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  /* ── Motion ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  /* ── Z-index ── */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-sticky-nav: 300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;

  /* ── Radius ── */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
}

/* ── Global clip ── */
html {
  overflow-x: clip;
  scroll-behavior: smooth;
}
body {
  overflow-x: clip;
}

/* ── Base ── */
body {
  margin: 0;
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h1 { font-size: var(--text-2xl); line-height: 1.1; }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }

@media (min-width: 40rem) {
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }
}

@media (min-width: 60rem) {
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-2xl); }
}

/* ── Focus ── */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* ── Utility ── */
.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;
}
.sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ── Page gutter ── */
.page-gutter {
  padding-inline: max(1rem, 4vw, 2rem);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
}