/* แอพโรงเรียนพระปริยัติธรรม — Design tokens */
:root {
  --c-bg: #F5EDE0;          /* ครีมกระดาษสา */
  --c-surface: #FFFFFF;
  --c-surface-2: #FAF5EC;
  --c-ink: #1F1612;          /* น้ำตาลเข้มเกือบดำ */
  --c-ink-2: #4A3A2E;
  --c-muted: #8B7868;
  --c-line: #E8DDC8;
  --c-line-2: #D9C9AE;
  --c-primary: #8D4122;      /* terracotta โลโก้ */
  --c-primary-soft: #F0DDD0;
  --c-primary-ink: #5C2812;
  --c-gold: #B8924C;         /* ทองหรี่ */
  --c-gold-soft: #F1E5C8;
  --c-saffron: #D97A2C;      /* ส้มจีวร */
  --c-leaf: #6B7A3F;         /* ใบลานเขียว */
  --c-blue: #3B5566;
  --c-red: #B5483A;
  --c-green: #5A7A4A;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  --shadow-card: 0 1px 2px rgba(31,22,18,.04), 0 4px 16px rgba(31,22,18,.04);
  --shadow-pop: 0 8px 32px rgba(31,22,18,.12);

  --font-thai: "IBM Plex Sans Thai", "Sarabun", -apple-system, sans-serif;
  --font-thai-loose: "Sarabun", "IBM Plex Sans Thai", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

html, body { margin:0; padding:0; font-family: var(--font-thai); color: var(--c-ink); background: var(--c-bg); -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
button { font-family: inherit; }

/* primitives shared across screens */
.app { font-family: var(--font-thai); color: var(--c-ink); background: var(--c-bg); height: 100%; display:flex; flex-direction:column; }
.app-status { height: 44px; }
.app-h { padding: 8px 20px 0; }
.app-h .crumb { font-size: 12px; color: var(--c-muted); letter-spacing: .04em; }
.app-h h1 { font-size: 24px; font-weight: 600; margin: 4px 0 0; letter-spacing: -.01em; }
.app-tabbar { display:flex; border-top: 1px solid var(--c-line); background: var(--c-surface); height: 60px; }
.app-tabbar .tab { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size: 10px; color: var(--c-muted); }
.app-tabbar .tab.active { color: var(--c-primary); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap: 6px; height: 40px; padding: 0 14px; border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-ink); font-size: 14px; cursor:pointer; }
.btn:hover { background: var(--c-surface-2); }
.btn.primary { background: var(--c-primary); color: white; border-color: var(--c-primary); }
.btn.primary:hover { background: var(--c-primary-ink); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.sm { height: 30px; font-size: 13px; padding: 0 10px; }

.chip { display:inline-flex; align-items:center; gap:4px; padding: 3px 8px; border-radius: 999px; font-size: 11px; background: var(--c-line); color: var(--c-ink-2); }
.chip.gold { background: var(--c-gold-soft); color: #6E5520; }
.chip.primary { background: var(--c-primary-soft); color: var(--c-primary-ink); }
.chip.green { background: #DDE7CF; color: #3B5023; }
.chip.red { background: #F2D8D3; color: #7A2A1F; }
.chip.muted { background: #ECE2D0; color: var(--c-muted); }

.card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); }

/* Lotus mark */
.lotus { display:inline-block; width: 22px; height: 22px; }

/* tiny dotted divider used as a thai/temple motif */
.thai-rule { display:flex; align-items:center; gap: 6px; color: var(--c-gold); font-size: 10px; }
.thai-rule::before, .thai-rule::after { content:""; flex:1; height: 1px; background: linear-gradient(90deg, transparent, var(--c-line-2), transparent); }

@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideUp { from { transform: translateY(100%) } to { transform: translateY(0) } }