@tailwind base;
@tailwind components;
@tailwind utilities;

/* ── Design tokens (derive จาก scheme ของ admincourt.go.th) ─────────────
   เป็น RGB triplet (เว้นวรรค) เท่านั้น — ห้าม hex เพราะ pattern
   rgb(var(--x) / <alpha-value>) ใน tailwind.config.ts จะพังเงียบๆ
   Light = ค่าจาก scheme · Dark = derive (ครีม → warm near-black, #0000EE → indigo สว่าง) */
:root {
  color-scheme: light;

  /* brand */
  --c-primary: 0 0 238; /* #0000EE — CTA, link */
  --c-primary-hover: 0 0 190; /* #0000BE */
  --c-on-primary: 255 255 255; /* ข้อความบนพื้น primary */
  --c-accent: 143 114 38; /* #8F7226 — ใช้น้อย: badge เตือน/decorative */

  /* semantic */
  --c-success: 83 163 54; /* #53A336 action-green */
  --c-success-strong: 41 109 24; /* เขียวเข้มสำหรับ text บน tint (contrast AA) */
  --c-error: 219 55 0; /* #DB3700 */
  --c-error-strong: 184 43 0; /* แดงเข้มสำหรับ text บน tint */
  --c-focus: 41 119 255; /* #2977FF — ring บนพื้นขาว (#6CB5F9 จางไป ~2:1) */

  /* surfaces */
  --c-surface: 255 255 255; /* พื้นหน้า */
  --c-elevated: 251 247 236; /* #FBF7EC card/ตาราง/navbar */
  --c-surface-muted: 243 237 220; /* #F3EDDC hover fill/แถวขยาย/file button */

  /* content */
  --c-ink: 0 0 0;
  --c-muted: 78 78 78; /* #4E4E4E */
  --c-line: 204 206 209; /* #CCCED1 เส้นขอบ/Divider */
}

.dark {
  color-scheme: dark;

  --c-primary: 143 143 255; /* #8F8FFF */
  --c-primary-hover: 170 170 255; /* #AAAAFF */
  --c-on-primary: 23 20 15; /* ข้อความเข้มบนพื้น primary สว่าง */
  --c-accent: 210 179 106; /* #D2B36A */

  --c-success: 148 205 128;
  --c-success-strong: 154 214 134;
  --c-error: 255 128 96;
  --c-error-strong: 255 157 126;
  --c-focus: 108 181 249; /* #6CB5F9 — ring บนพื้นมืด */

  --c-surface: 23 20 15; /* #17140F */
  --c-elevated: 36 31 22; /* #241F16 */
  --c-surface-muted: 44 38 27; /* #2C261B */

  --c-ink: 247 243 233; /* #F7F3E9 */
  --c-muted: 174 166 148; /* #AEA694 */
  --c-line: 62 56 43; /* #3E382B */
}

@layer base {
  html {
    @apply font-sans antialiased;
  }
  body {
    @apply bg-surface text-ink;
  }
}

/* ── Component classes ─────────────────────────────────────────────────
   กติกา: variant compose ใน markup (class="btn btn-primary") — Tailwind v3
   ห้าม @apply custom class ซ้อนในอีก custom class
   .btn-xs ต้องอยู่หลัง .btn ในไฟล์เดียวกัน (source order ชนะ padding) */
@layer components {
  /* buttons */
  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-pill px-4 py-2 text-sm font-medium
      transition-colors focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2
      focus-visible:ring-offset-surface disabled:cursor-not-allowed disabled:opacity-50;
  }
  .btn-primary {
    @apply bg-primary text-on-primary hover:bg-primary-hover;
  }
  .btn-secondary {
    @apply border border-line bg-transparent text-ink hover:bg-surface-muted;
  }
  .btn-outline-danger {
    @apply border border-error/50 text-error-strong hover:bg-error/10;
  }
  .btn-outline-success {
    @apply border border-success/50 text-success-strong hover:bg-success/10;
  }
  .btn-sm {
    @apply px-3 py-1.5;
  }
  .btn-xs {
    @apply px-2.5 py-1 text-xs;
  }

  /* forms */
  .input {
    @apply w-full rounded-card border border-line bg-surface px-3 py-2 text-sm text-ink
      placeholder:text-muted focus:border-focus focus:ring-1 focus:ring-focus;
  }
  .label {
    @apply mb-1 block text-sm font-medium text-ink;
  }

  /* surfaces */
  .card {
    @apply rounded-card border border-line bg-elevated shadow-soft;
  }
  .table-card {
    @apply overflow-x-auto rounded-card border border-line bg-elevated shadow-soft;
  }
  .table-head {
    @apply border-b border-line text-left text-xs uppercase tracking-wide text-muted;
  }
  .empty-state {
    @apply rounded-card border border-dashed border-line p-8 text-center text-sm text-muted;
  }

  /* badges / spinner / links */
  .badge {
    @apply inline-block rounded-pill px-2.5 py-0.5 text-xs font-medium;
  }
  .badge-success {
    @apply bg-success/15 text-success-strong;
  }
  .badge-neutral {
    @apply bg-surface-muted text-muted;
  }
  .badge-accent {
    @apply bg-accent/15 text-accent;
  }
  .spinner {
    @apply h-4 w-4 animate-spin rounded-full border-2 border-line border-t-primary;
  }
  .link {
    @apply font-medium text-primary hover:underline;
  }
  .nav-link {
    @apply rounded-pill px-3 py-1.5 text-muted transition-colors hover:bg-surface-muted hover:text-ink;
  }

  /* alerts + info panel */
  .alert {
    @apply rounded-card border px-4 py-3 text-sm;
  }
  .alert-error {
    @apply border-error/40 bg-error/10 text-error-strong;
  }
  .alert-success {
    @apply border-success/40 bg-success/10 text-success-strong;
  }
  .alert-info {
    @apply border-primary/30 bg-primary/5 text-ink;
  }
  .panel-info {
    @apply rounded-card border border-primary/30 bg-primary/5 p-4 text-sm text-ink;
  }
}