/* =========================================================================
   Nương Design System — Tokens v1
   Master palette: Trạm Tấu (rêu núi đá · đất khô · mật ong rừng · giấy · than củi)
   Single source of truth. Symlinked into mọi client — sửa một lần lan mọi nơi.
   ========================================================================= */

:root {
  /* ─── Brand palette — Trạm Tấu master ──────────────────────────────────── */
  --cream:      #F5F1E8;   /* surface · app bg mặc định, không bao giờ dùng pure white */
  --paper:      #EFEADD;   /* secondary surface, dùng cho block grain (paper texture) */
  --ink:        #2B2B2B;   /* text · heading + body, không dùng pure black */

  --moss:       #4A5D3F;   /* primary brand — rêu núi đá */
  --moss-deep:  #34452C;   /* primary hover, dark section surface */

  --terra:      #C67B5C;   /* secondary accent — đất ruộng bậc thang khô */
  --terra-deep: #A8624A;   /* secondary deep */

  --honey:      #E8B14C;   /* accent · mật ong rừng — highlight tinh tế, dùng ≤ 5% diện tích */

  /* ─── Warm gray ramp — sương & giấy gói ───────────────────────────────── */
  --fog-1: #E5DFD3;
  --fog-2: #C9C2B2;
  --fog-3: #8C8676;
  --fog-4: #5E594E;

  /* ─── Sub-palettes — Phase 3 multi-farm (document only) ───────────────── */
  --moc-chau-primary:   #3D5A6B;
  --moc-chau-secondary: #8FA67E;
  --moc-chau-accent:    #D49EAF;
  --ba-vi-primary:      #7A3D52;
  --ba-vi-secondary:    #E89F7A;
  --ba-vi-accent:       #C9A24A;

  /* ─── Strokes / dividers ──────────────────────────────────────────────── */
  --stroke-faint: rgba(43, 43, 43, .10);
  --stroke-soft:  rgba(43, 43, 43, .18);
  --stroke-card:  rgba(43, 43, 43, .30);

  /* ─── Typography stack ────────────────────────────────────────────────── */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ─── Spacing — 4px base ladder ───────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* ─── Radii — editorial, tối thiểu ────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-full: 9999px;

  /* ─── Layout ──────────────────────────────────────────────────────────── */
  --max-content:          1200px;
  --page-gutter-mobile:   20px;
  --page-gutter-desktop:  40px;

  /* ─── Motion ──────────────────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
}