/* BonDevLab design tokens — contrast checked against WCAG 2.x (see docs/DESIGN_SYSTEM.md). */

@font-face {
  font-family: "Noto Sans Thai";
  src: url("../vendor/noto-sans-thai-2.002/NotoSansThai-wght.5112e014f6ab.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0E00-0E7F, U+200C-200D, U+25CC;
}

:root {
  /* Colour */
  --bg: #f6f7f3;
  --surface: #ffffff;
  --text: #24332e;          /* 12.3:1 on bg */
  --muted: #5e6d65;         /* 5.1:1 on bg, 4.6:1 on primary-soft */
  --primary: #315e52;       /* 7.4:1 with white text */
  --primary-hover: #274c42; /* 9.6:1 with white text */
  --primary-soft: #e5efe9;
  --accent: #b7794b;        /* 3.6:1 — decoration / large text only */
  --accent-strong: #95603a; /* 5.2:1 on white — small brown text */
  --border: #dce3dc;        /* decorative dividers only */
  --border-strong: #7a8a81; /* 3.6:1 — form controls (UI >= 3:1) */

  --success: #2f6b45;  --success-soft: #e3f1e7;
  --warning: #8a5a00;  --warning-soft: #fbf0da;
  --danger:  #a3352d;  --danger-soft:  #f9e4e1;
  --info:    #315e52;  --info-soft:    #e5efe9;

  /* Type */
  --font-sans: "Noto Sans Thai", "Segoe UI", "Leelawadee UI", Tahoma, system-ui, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --text-base: 1rem;       /* 16px UI */
  --text-body: 1.0625rem;  /* 17px reading */
  --text-sm: 0.9375rem;
  --text-xs: 0.8125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5625rem;
  --text-2xl: 1.953rem;
  --text-3xl: 2.441rem;
  --leading-ui: 1.6;
  --leading-body: 1.75;
  --leading-tight: 1.3;
  --measure: 70ch;

  /* Space (4px scale) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Shape */
  --radius-card: 12px;
  --radius-control: 8px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgb(36 51 46 / 0.06), 0 2px 8px rgb(36 51 46 / 0.05);
  --focus-ring: 0 0 0 3px var(--surface), 0 0 0 6px var(--primary);

  --container: 72rem;
  --sidebar-width: 15rem;
}