/* ================================================================
   TEERAPOL Design Tokens — v1.0
   Apple-system minimal · Light only
   วางไฟล์นี้ที่ assets/css/design-tokens.css แล้ว <link> ก่อน admin.css
   (ค่าด้านล่าง override ตัวแปร --admin-* เดิมทั้งหมด)
   ================================================================ */

:root {
  /* ── Fonts ──────────────────────────────────────────────── */
  /* UI — ใกล้ SF Pro มาก, ฟรี OFL */
  --font-ui:   'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  /* mono — ใกล้ SF Mono, ฟรี OFL · ใช้กับ slug, ตัวเลข, โค้ด, kbd */
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* ── Neutrals ───────────────────────────────────────────── */
  --ink:             #1d1d1f;   /* text primary */
  --gray:            #6e6e73;   /* text secondary */
  --silver:          #86868b;   /* text tertiary, captions */
  --border-strong:   #d2d2d7;   /* input borders */
  --border-hairline: #e8e8ed;   /* dividers, card borders */
  --fill:            #f0f0f2;   /* chips, secondary fills */
  --fog:             #f5f5f7;   /* page bg, sidebar, table head */
  --surface:         #ffffff;

  /* ── Accent (จุดเดียวทั้งระบบ) ──────────────────────────── */
  --accent:          #0071e3;
  --accent-hover:    #0077ed;
  --accent-tint:     rgba(0, 113, 227, .10);  /* selected/active */
  --focus-ring:      0 0 0 4px rgba(0, 113, 227, .15);

  /* ── Semantic (status เท่านั้น) ─────────────────────────── */
  --success:         #34c759;
  --success-text:    #1d8a3d;
  --success-bg:      #e7f6ec;
  --warning:         #ff9500;
  --warning-text:    #b25e00;
  --warning-bg:      #fff4e5;
  --danger:          #ff3b30;
  --danger-text:     #d70015;
  --danger-bg:       #fdecec;
  --ai:              #6e43c8;   /* AI-generated badge */
  --ai-bg:           #f3eefc;

  /* ── Radius ─────────────────────────────────────────────── */
  --radius-sm:   6px;     /* kbd, small chips */
  --radius:      8px;     /* ปุ่ม, input, nav item */
  --radius-lg:   12px;    /* card, table, modal */
  --radius-pill: 980px;   /* badge, toggle, public CTA */

  /* ── Elevation (hairline ก่อนเงาเสมอ) ───────────────────── */
  --shadow-raised:  0 1px 2px rgba(0, 0, 0, .05);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .06);

  /* ── Spacing (4px grid) ─────────────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px;

  /* ════════════════════════════════════════════════════════
     Bridge — override ตัวแปรเดิมของ admin.css
     ════════════════════════════════════════════════════════ */
  --admin-bg:        var(--fog);
  --admin-sidebar:   var(--fog);          /* เดิม #000 → sidebar สว่างแบบ macOS */
  --admin-card:      var(--surface);
  --admin-border:    var(--border-hairline);
  --admin-text:      var(--ink);
  --admin-muted:     var(--gray);
  --admin-soft:      var(--fill);
  --admin-primary:   var(--ink);
  --admin-primary-h: #3a3a3c;
  --admin-accent:    var(--accent);
  --admin-accent-h:  var(--accent-hover);
  --admin-success:   var(--success);
  --admin-warning:   var(--warning);
  --admin-danger:    var(--danger);
  --admin-radius:    var(--radius-lg);   /* cards/tables = 12; buttons/inputs hardcode 8 */
  --admin-shadow:    var(--shadow-raised);
  --admin-shadow-md: var(--shadow-overlay);
}