/*
 * GTS Design System — tokens และ primitives กลางของเว็บ static (dist/)
 * ค่าชุดเดียวกันนี้ถูกใช้ใน backoffice/src/app/globals.css — ถ้าแก้ตรงนี้ให้แก้ที่นั่นด้วย
 */
:root {
  --gts-bg-950: #020812;
  --gts-bg-900: #04101f;
  --gts-navy-800: #06172b;
  --gts-navy-700: #0a2340;

  --gts-blue-500: #00a8ff;
  --gts-cyan-400: #16c9ff;
  --gts-blue-soft: rgba(0, 168, 255, .14);

  --gts-gold-500: #ffbf3f;
  --gts-gold-300: #ffd56a;
  --gts-amber-500: #ff9d1c;
  --gts-gold-soft: rgba(255, 191, 63, .14);

  --gts-silver-100: #eef4fa;
  --gts-silver-300: #c6d1dc;
  --gts-muted-500: #8999aa;

  --gts-success: #18d98a;
  --gts-warning: #f8b84e;
  --gts-danger: #ff4d63;
  --gts-info: #16c9ff;

  --gts-border: rgba(166, 193, 222, .18);
  --gts-border-gold: rgba(255, 191, 63, .35);
  --gts-border-blue: rgba(22, 201, 255, .32);

  --gts-surface-1: rgba(7, 20, 38, .82);
  --gts-surface-2: rgba(10, 29, 52, .72);
  --gts-surface-solid: #071426;
  --gts-overlay: rgba(2, 8, 18, .86);

  --gts-gold-grad: linear-gradient(180deg, #ffe7a0 0%, #ffd56a 28%, #ffbf3f 60%, #f29a22 100%);
  --gts-metal-frame: linear-gradient(135deg, #ffe7a0 0%, #ffbf3f 16%, #5a3e10 34%, #0d2a4a 52%, #00a8ff 72%, #ffbf3f 90%, #fff1c2 100%);
  --gts-highlight: inset 0 1px 0 rgba(255, 255, 255, .08);
  --gts-shadow-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 12px 32px -18px rgba(0, 0, 0, .9);
  --gts-shadow-2: 0 1px 0 rgba(255,255,255,.06) inset, 0 24px 56px -24px rgba(0, 0, 0, .95);
  --gts-ring: 0 0 0 3px rgba(22, 201, 255, .35);

  --gts-radius-sm: 12px;
  --gts-radius: 18px;
  --gts-radius-lg: 24px;

  --gts-font-thai: "IBM Plex Sans Thai", "Noto Sans Thai", Tahoma, sans-serif;
  --gts-font-head: Kanit, "IBM Plex Sans Thai", "Noto Sans Thai", sans-serif;
  --gts-font-latin: Inter, "IBM Plex Sans Thai", system-ui, sans-serif;
  --gts-font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;

  --gts-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Primitives ---------- */
.gts-num { font-family: var(--gts-font-latin); font-variant-numeric: tabular-nums; }
.gts-mono { font-family: var(--gts-font-mono); font-size: .92em; }

.gts-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent; font-family: var(--gts-font-thai); font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .2s var(--gts-ease), filter .2s, background-color .2s, border-color .2s, box-shadow .2s, color .2s; }
.gts-btn:focus-visible { outline: none; box-shadow: var(--gts-ring); }
.gts-btn:active { transform: translateY(1px); }
.gts-btn:disabled, .gts-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; filter: none; }
.gts-btn-gold { color: #1a1003; background: var(--gts-gold-grad); border-color: rgba(255, 231, 160, .85); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 8px 22px -10px rgba(255,157,28,.7); }
.gts-btn-gold:hover { filter: brightness(1.07); }
.gts-btn-blue { color: var(--gts-silver-100); background: var(--gts-navy-800); border-color: var(--gts-border-blue); }
.gts-btn-blue:hover { border-color: var(--gts-cyan-400); background: var(--gts-navy-700); }
.gts-btn-ghost { color: var(--gts-silver-300); background: transparent; border-color: var(--gts-border); }
.gts-btn-ghost:hover { color: var(--gts-silver-100); border-color: var(--gts-border-blue); background: var(--gts-blue-soft); }
.gts-btn-danger { color: #ffd6dc; background: rgba(255, 77, 99, .1); border-color: rgba(255, 77, 99, .5); }
.gts-btn-danger:hover { background: rgba(255, 77, 99, .18); }

.gts-card { position: relative; border-radius: var(--gts-radius-lg); border: 1px solid var(--gts-border); background: linear-gradient(160deg, rgba(12, 32, 58, .82), rgba(5, 15, 30, .9)); box-shadow: var(--gts-shadow-1); }
.gts-panel { border-radius: var(--gts-radius); border: 1px solid var(--gts-border); background: var(--gts-surface-solid); box-shadow: var(--gts-shadow-1); }
.gts-frame { padding: 2px; border-radius: var(--gts-radius-lg); background: var(--gts-metal-frame); }

.gts-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--gts-border); font-size: 12px; font-weight: 500; line-height: 1.3; white-space: nowrap; color: var(--gts-silver-300); background: rgba(255,255,255,.03); }
.gts-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.gts-badge-success { color: var(--gts-success); border-color: rgba(24, 217, 138, .4); background: rgba(24, 217, 138, .08); }
.gts-badge-warning { color: var(--gts-warning); border-color: rgba(248, 184, 78, .4); background: rgba(248, 184, 78, .08); }
.gts-badge-danger { color: var(--gts-danger); border-color: rgba(255, 77, 99, .42); background: rgba(255, 77, 99, .08); }
.gts-badge-info { color: var(--gts-info); border-color: var(--gts-border-blue); background: var(--gts-blue-soft); }
.gts-badge-gold { color: var(--gts-gold-300); border-color: var(--gts-border-gold); background: var(--gts-gold-soft); }

.gts-kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--gts-gold-300); font-family: var(--gts-font-latin); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.gts-kicker::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--gts-gold-300), var(--gts-amber-500)); }

@media (prefers-reduced-motion: reduce) {
  .gts-btn, .gts-card { transition: none; }
}