/* ============================================================
 * Kru Check — design tokens
 * ธีม: ขาว / ฟ้าอ่อนพาสเทล / modern minimal / education tech
 * ============================================================ */
:root {
  /* palette */
  --bg: #f6fafe;
  --bg-soft: #eef6fd;
  --card: #ffffff;
  --primary: #2b8fdb;
  --primary-soft: #e3f1fc;
  --primary-deep: #1b6fae;
  --ink: #16324a;
  --muted: #6b87a0;
  --faint: #93a9bd;
  --line: #e3eef7;
  --success: #2fa968;
  --success-soft: #e2f5ea;
  --warning: #d9931c;
  --warning-soft: #fdf3dd;
  --danger: #d64545;
  --danger-soft: #fbe7e7;

  /* shape */
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 24px;

  /* elevation */
  --shadow: 0 2px 10px rgba(22, 50, 74, 0.07);
  --shadow-lg: 0 8px 28px rgba(22, 50, 74, 0.12);

  /* type */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Thai",
    "Sarabun", "Leelawadee UI", "Tahoma", sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;

  /* touch + spacing */
  --tap: 44px;
  --gap: 12px;
  --page-pad: 16px;
  --maxw: 560px;

  /* safe areas (iPhone notch / home indicator) */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}