/* WebCheck UI theme — portable tokens, fonts, display modes and base rules.
   Source: WebCheck Accessibility side panel (brand: webcheck.in.th).
   Font URLs are relative to this file: keep the fonts/ folder next to it. */

@font-face {
  font-family: "Sarabun";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/sarabun-400-thai.woff2") format("woff2");
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

@font-face {
  font-family: "Sarabun";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/sarabun-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Sarabun";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/sarabun-600-thai.woff2") format("woff2");
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

@font-face {
  font-family: "Sarabun";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/sarabun-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Sarabun";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/sarabun-700-thai.woff2") format("woff2");
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

@font-face {
  font-family: "Sarabun";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/sarabun-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */

:root {
  color-scheme: light;

  --c-bg: #F7FAFD;
  --c-surface: #FFFFFF;
  --c-text: #050505;
  --c-text-muted: #4F4F4F;
  --c-primary: #2151C5;
  --c-primary-hover: #1A43A6;
  --c-on-primary: #FFFFFF;
  --c-navy: #30508E;
  --c-tint: #E0EBF6;
  --c-on-tint: #1C3F99;
  --c-border: #E0E0E0;
  --c-border-strong: #7A828E; /* ≥ 3:1 on surface, bg and tint (WCAG 1.4.11) */
  --c-focus: #2151C5;

  --c-selected-bg: #E0EBF6;
  --c-selected-border: #2151C5;
  --c-selected-text: #050505;
  --c-badge-bg: #E0EBF6;
  --c-badge-selected-bg: #FFFFFF;
  --c-badge-text: #2151C5;
  --c-chip-bg: #2151C5;
  --c-chip-text: #FFFFFF;

  --c-error-text: #A1141B;
  --c-error-bg: #FCDBDD;
  --c-error-border: #F2A7AC;
  --c-warning-text: #805606;
  --c-warning-readable: #9A5B00;
  --c-warning-accent: #C17A00;
  --c-warning-bg: #FFEFD1;
  --c-success-text: #0A6B3F;
  --c-success-bg: #E2F7EC;
  --c-notice-text: #1F1270;
  --c-notice-bg: #DBF5FB;
  --c-neutral-bg: #F0F0F0;

  --c-disabled-bg: #E0E0E0;
  --c-disabled-text: #4F4F4F;
  --c-disabled-border: transparent;

  --c-logo-yellow: #EECE49;
  --c-logo-red: #F44545;
  --c-logo-blue: #155B96;

  --shadow-pop: 0 16px 40px rgba(5, 5, 5, 0.18);
  --radius-sm: 10px;
  --radius-md: 15px;
  --radius-pill: 20px;
  --font-sans: "Sarabun", "Noto Sans Thai", "Leelawadee UI", "Tahoma", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  /* Shared scales preserve the current UI; rem follows display font scaling. */
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-md: 0.9375rem;
  --text-base: 1rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.125rem;
  --text-2xl: 1.1875rem;
  --text-heading-sm: 1.25rem;
  --text-heading-md: 1.375rem;
  --text-heading-lg: 1.5625rem;
  --text-heading-xl: 1.625rem;
  --text-display-sm: 2rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-2-5: 0.625rem;
  --space-3: 0.75rem;
  --space-3-5: 0.875rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --page-gutter: var(--space-4);
  --leading-tight: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  --control-min-height: 2.75rem;
  --duration-fast: 150ms;
  --focus-ring: 3px solid var(--c-focus);
  --focus-offset: 2px;

}

@media (min-width: 24rem) {
  :root { --page-gutter: var(--space-5); }
}

@media (min-width: 48rem) {
  :root { --page-gutter: var(--space-8); }
}

@media (min-width: 64rem) {
  :root { --page-gutter: 2.5rem; }
}

/* High contrast modes, same options as webcheck.in.th */
:root[data-contrast="yellow"],
:root[data-contrast="black"] {
  color-scheme: dark;
  --c-bg: #050505;
  --c-surface: #050505;
  --c-text: var(--c-fg);
  --c-text-muted: var(--c-fg);
  --c-primary: var(--c-fg);
  --c-primary-hover: var(--c-fg);
  --c-on-primary: #050505;
  --c-navy: var(--c-fg);
  --c-tint: #050505;
  --c-on-tint: var(--c-fg);
  --c-border: var(--c-fg);
  --c-border-strong: var(--c-fg);
  --c-focus: var(--c-fg);

  --c-selected-bg: var(--c-fg);
  --c-selected-border: var(--c-fg);
  --c-selected-text: #050505;
  --c-badge-bg: #050505;
  --c-badge-selected-bg: #050505;
  --c-badge-text: var(--c-fg);
  --c-chip-bg: #050505;
  --c-chip-text: var(--c-fg);

  --c-error-text: var(--c-fg);
  --c-error-bg: #050505;
  --c-error-border: var(--c-fg);
  --c-warning-text: var(--c-fg);
  --c-warning-readable: var(--c-fg);
  --c-warning-accent: var(--c-fg);
  --c-warning-bg: #050505;
  --c-success-text: var(--c-fg);
  --c-success-bg: #050505;
  --c-notice-text: var(--c-fg);
  --c-notice-bg: #050505;
  --c-neutral-bg: #050505;

  --c-disabled-bg: #050505;
  --c-disabled-text: var(--c-fg);
  --c-disabled-border: var(--c-fg);

  --shadow-pop: none;
}

:root[data-contrast="yellow"] {
  --c-fg: #FFFB00;
}

:root[data-contrast="black"] {
  --c-fg: #FFFFFF;
}

/* Font scale, same steps as webcheck.in.th */
:root[data-font-scale="75"] {
  font-size: 75%;
}

:root[data-font-scale="100"] {
  font-size: 100%;
}

:root[data-font-scale="150"] {
  font-size: 150%;
}

/* ---------- Base ---------- */

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

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

p,
h1,
h2,
ul,
ol,
dl,
dd {
  margin: 0;
}

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

button {
  cursor: pointer;
}

svg {
  flex-shrink: 0;
  display: block;
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Headings get focus programmatically when the view changes; they are not
   controls, so no ring (screen readers still announce them). */
[tabindex="-1"]:focus {
  outline: none;
}

.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;
}

[hidden] {
  display: none !important;
}

.panel-shell {
  min-height: 100vh;
}

.brand-bar {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  display: flex;
}

.brand-bar span {
  flex: 1;
}

.brand-bar span:nth-child(1) {
  background: var(--c-logo-yellow);
}

.brand-bar span:nth-child(2) {
  background: var(--c-logo-red);
}

.brand-bar span:nth-child(3) {
  background: var(--c-logo-blue);
}

:root[data-contrast="yellow"] .brand-bar,
:root[data-contrast="black"] .brand-bar {
  display: none;
}