/* ============================================================
   BORSUP — Design Tokens & Base Styles
   Premium Tailoring: ink charcoal + gold, burgundy accent
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Trirong:wght@400;500;600;700&family=Anuphan:wght@300;400;500;600;700&display=swap');

:root {
  /* ---- Brand palette ---- */
  --ink-900: #14181d;
  --ink-850: #191e25;
  --ink-800: #1f2630;
  --ink-700: #2a323d;
  --ink-600: #3a4452;

  --gold-600: #9a7b32;
  --gold-500: #bf9b49;
  --gold-400: #d4b463;
  --gold-300: #e4cd8e;
  --gold-100: #f6ecd3;
  --gold-tint: #faf4e6;

  --wine-700: #6e2438;
  --wine-600: #8a2f47;
  --wine-500: #a83a56;
  --wine-100: #f7e6ec;

  /* ---- Neutrals (warm paper) ---- */
  --paper: #f7f5f1;
  --paper-2: #f1eee8;
  --surface: #ffffff;
  --surface-2: #fbfaf7;
  --line: #e7e2d8;
  --line-2: #efebe2;

  --text-900: #20242b;
  --text-700: #4a5159;
  --text-500: #767d86;
  --text-400: #9aa0a8;

  /* ---- Status ---- */
  --green-600: #2f7d54;
  --green-100: #e3f2e9;
  --amber-600: #b87918;
  --amber-100: #fbeed3;
  --red-600: #c0392b;
  --red-100: #fbe6e3;
  --blue-600: #2c6e9b;
  --blue-100: #e2eef6;
  --slate-600: #586677;
  --slate-100: #e9edf2;

  /* ---- Geometry ---- */
  --r-xs: 7px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* ---- Shadows ---- */
  --sh-xs: 0 1px 2px rgba(20,24,29,.06);
  --sh-sm: 0 2px 8px rgba(20,24,29,.06), 0 1px 2px rgba(20,24,29,.04);
  --sh-md: 0 8px 24px rgba(20,24,29,.08), 0 2px 6px rgba(20,24,29,.05);
  --sh-lg: 0 18px 48px rgba(20,24,29,.14), 0 6px 14px rgba(20,24,29,.08);
  --sh-gold: 0 8px 24px rgba(159,123,50,.22);

  --font-head: 'Trirong', 'Anuphan', serif;
  --font-body: 'Anuphan', system-ui, sans-serif;

  --sidebar-w: 256px;
  --topbar-h: 68px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--text-900);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;            /* กันเลื่อนแนวนอนระดับหน้า (clip ไม่ทำลาย position: sticky เหมือน hidden) */
}
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
::selection { background: var(--gold-300); color: var(--ink-900); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d8d2c6; border-radius: 8px; border: 2px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: #c4bcab; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- Reusable atoms ---- */
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.serif { font-family: var(--font-head); }

/* Animations */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes riseIn { from { transform: translateY(12px); } to { transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: no-preference) {
  .route-anim { animation: riseIn .5s cubic-bezier(.22,.61,.36,1) both; }
  .stagger > * { animation: riseIn .55s cubic-bezier(.22,.61,.36,1) both; }
  .stagger > *:nth-child(1){animation-delay:.02s}
  .stagger > *:nth-child(2){animation-delay:.06s}
  .stagger > *:nth-child(3){animation-delay:.10s}
  .stagger > *:nth-child(4){animation-delay:.14s}
  .stagger > *:nth-child(5){animation-delay:.18s}
  .stagger > *:nth-child(6){animation-delay:.22s}
  .stagger > *:nth-child(7){animation-delay:.26s}
  .stagger > *:nth-child(8){animation-delay:.30s}
}

#root { min-height: 100vh; }