:root {
  --yellow: #ffd525; --yellow-hover: #f5c400; --yellow-soft: #fff3b7;
  --ink: #101318; --muted: #59616c; --line: #e2e6eb; --surface: #fff; --canvas: #f3f5f7;
  --dark: #292e35; --danger: #9c2525; --mint: #edf9f1;
  --font: 'IBM Plex Sans Thai', Tahoma, Arial, sans-serif;
  --text-xs: .72rem; --text-sm: .85rem; --text-base: 1rem; --text-lg: 1.2rem; --text-xl: 1.5rem;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --radius-sm: 5px; --radius: 9px; --radius-lg: 16px;
  --shadow: 0 2px 3px #10131810; --shadow-raised: 0 7px 24px #10131818;
  --focus: 0 0 0 3px #fff, 0 0 0 6px #17191e;
  --page-pad: 20px; --header-height: 72px;
}