/* =========================================================
 * design-tokens.css
 * สกัดจาก example_ui/computor_ui.html + example_ui/phone_ui.html
 * ใช้เป็น Single Source of Truth ทั้งโปรเจค
 * ห้ามสร้างสี/ฟอนต์ใหม่นอกไฟล์นี้
 * ========================================================= */

:root {
  /* ===== COLORS (60:30:10 ตาม example_ui) ===== */
  /* 60% พื้นหลัง */
  --bg: #FFFFFF;
  --surface: #F5F6F8;
  --card: #FFFFFF;

  /* 30% Navy (Nav/Header/Footer) */
  --nav: #1E293B;
  --nav-2: #334155;

  /* 10% Accent (Mint) */
  --accent: #10B981;
  --accent-dark: #059669;
  --primary: var(--accent);
  --primary-dark: var(--accent-dark);

  /* ข้อความ */
  --text: #0F172A;
  --muted: #64748B;
  --border: #E2E8F0;

  /* Semantic */
  --danger: #EF4444;
  --warning: #F59E0B;
  --star: #F59E0B;
  --success: #10B981;
  --info: #3B82F6;

  /* ===== TYPOGRAPHY ===== */
  --font-sans: 'Sarabun', system-ui, -apple-system, Segoe UI, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;

  --lh-tight: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /* ===== SPACING SCALE (4px grid) ===== */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ===== RADIUS ===== */
  --rd-xs: 4px;
  --rd-sm: 6px;
  --rd-md: 8px;
  --rd-lg: 12px;
  --rd-xl: 16px;
  --rd-2xl: 20px;
  --rd-full: 9999px;

  /* ===== SHADOW ===== */
  --sh-sm: 0 1px 2px rgba(0, 0, 0, .06);
  --sh-md: 0 2px 6px rgba(0, 0, 0, .08);
  --sh-lg: 0 8px 24px rgba(15, 23, 42, .10);
  --sh-xl: 0 20px 40px rgba(15, 23, 42, .12);

  /* ===== LAYOUT ===== */
  --container: 1280px;
  --desk-h: 96px;     /* desktop topbar + compact logo header */
  --top-h: 56px;      /* mobile top nav */
  --bot-h: 62px;      /* mobile bottom nav */
  --header-h: 64px;   /* desktop header */

  /* ===== ANIMATION ===== */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;

  /* ===== Z-INDEX ===== */
  --z-nav: 50;
  --z-drawer: 60;
  --z-modal: 70;
  --z-toast: 80;
}

/* Dark mode hook (จะเติม palette ทีหลังถ้าต้องการ) */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg: #0F172A;
    --surface: #1E293B;
    --card: #1E293B;
    --text: #F8FAFC;
    --muted: #94A3B8;
    --border: #334155;
  }
}