/* ============================================================
   ระบบเกียรติบัตรออนไลน์ — กลุ่มโรงเรียนบ้านด่าน 2
   Design tokens
   ============================================================ */

:root {
  /* Brand — indigo/navy primary, gold accent */
  --c-primary:        oklch(0.42 0.11 264);
  --c-primary-600:    oklch(0.48 0.12 264);
  --c-primary-500:    oklch(0.55 0.13 264);
  --c-primary-700:    oklch(0.36 0.10 264);
  --c-primary-soft:   oklch(0.95 0.025 264);
  --c-primary-soft2:  oklch(0.90 0.04 264);

  --c-gold:           oklch(0.74 0.11 78);
  --c-gold-deep:      oklch(0.62 0.11 70);
  --c-gold-soft:      oklch(0.95 0.035 85);

  /* Neutrals — warm-cool tinted */
  --c-ink:            oklch(0.26 0.018 264);
  --c-ink-soft:       oklch(0.44 0.015 264);
  --c-muted:          oklch(0.60 0.012 264);
  --c-faint:          oklch(0.74 0.010 264);
  --c-line:           oklch(0.90 0.008 264);
  --c-line-soft:      oklch(0.94 0.006 264);
  --c-surface:        oklch(1 0 0);
  --c-surface-2:      oklch(0.985 0.004 264);
  --c-bg:             oklch(0.975 0.006 264);
  --c-bg-deep:        oklch(0.955 0.008 264);

  /* Status */
  --c-ok:             oklch(0.58 0.11 155);
  --c-ok-soft:        oklch(0.95 0.04 155);
  --c-warn:           oklch(0.70 0.12 70);
  --c-warn-soft:      oklch(0.96 0.05 78);
  --c-danger:         oklch(0.58 0.16 25);
  --c-danger-soft:    oklch(0.96 0.04 25);

  /* Type */
  --font-ui: "Sarabun", system-ui, sans-serif;
  --font-display: "Pridi", "Sarabun", serif;

  /* Radii */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Shadow */
  --sh-sm: 0 1px 2px oklch(0.42 0.11 264 / 0.06), 0 1px 3px oklch(0.42 0.11 264 / 0.05);
  --sh-md: 0 2px 6px oklch(0.42 0.11 264 / 0.07), 0 6px 18px oklch(0.42 0.11 264 / 0.08);
  --sh-lg: 0 8px 24px oklch(0.42 0.11 264 / 0.10), 0 24px 56px oklch(0.42 0.11 264 / 0.10);
  --sh-gold: 0 6px 20px oklch(0.62 0.11 70 / 0.22);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--font-ui);
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}

#root { min-height: 100%; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--c-primary-soft2); }

/* Scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--c-line); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--c-faint); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; font-size: 15px; line-height: 1;
  padding: 13px 20px; border-radius: var(--r-md);
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .15s ease;
  white-space: nowrap; user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--c-primary); color: #fff; box-shadow: var(--sh-sm); }
.btn-primary:hover { background: var(--c-primary-600); box-shadow: var(--sh-md); }
.btn-gold { background: var(--c-gold-deep); color: #fff; box-shadow: var(--sh-sm); }
.btn-gold:hover { background: oklch(0.58 0.11 70); box-shadow: var(--sh-gold); }
.btn-ghost { background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-line); }
.btn-ghost:hover { border-color: var(--c-faint); background: var(--c-surface-2); }
.btn-soft { background: var(--c-primary-soft); color: var(--c-primary-700); }
.btn-soft:hover { background: var(--c-primary-soft2); }
.btn-lg { padding: 16px 26px; font-size: 16.5px; border-radius: var(--r-lg); }
.btn-sm { padding: 9px 14px; font-size: 13.5px; border-radius: var(--r-sm); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Inputs ---------- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field > label { font-size: 13.5px; font-weight: 600; color: var(--c-ink-soft); }
.input {
  width: 100%; background: var(--c-surface); border: 1.5px solid var(--c-line);
  border-radius: var(--r-md); padding: 12px 14px; font-size: 15.5px; color: var(--c-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder { color: var(--c-faint); }
.input:focus { outline: none; border-color: var(--c-primary-500); box-shadow: 0 0 0 4px var(--c-primary-soft); }

/* ---------- Cards / chips ---------- */
.card {
  background: var(--c-surface); border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg); box-shadow: var(--sh-sm);
}
.chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: var(--r-pill);
  background: var(--c-primary-soft); color: var(--c-primary-700);
}
.chip-gold { background: var(--c-gold-soft); color: var(--c-gold-deep); }
.chip-ok   { background: var(--c-ok-soft); color: var(--c-ok); }
.chip-muted{ background: var(--c-bg-deep); color: var(--c-muted); }
.chip-warn { background: var(--c-warn-soft); color: oklch(0.50 0.12 60); }

/* ---------- Utility ---------- */
.muted { color: var(--c-muted); }
.faint { color: var(--c-faint); }
.display { font-family: var(--font-display); }
.spin { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@keyframes fadeUp {
  from { opacity: .5; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: .55; } to { opacity: 1; } }
@keyframes pop { 0% { transform: scale(.96); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }
.anim-up { animation: fadeUp .4s cubic-bezier(.22,1,.36,1) both; }
.anim-in { animation: fadeIn .35s ease both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}