/* ============================================================
   Pharmmy BookClub — Design Tokens
   โทน "ห้องสมุดส่วนตัว / ร้านหนังสืออบอุ่น"
   ตัวแปรทั้งหมด: สี (light+dark), ฟอนต์, ระยะห่าง, เงา, มุมโค้ง
   ============================================================ */

:root {
  /* ---------- Typography ---------- */
  --font-display: "Noto Serif Thai", Georgia, "Times New Roman", serif;
  --font-sans: "IBM Plex Sans Thai", "Anuphan", "Noto Sans Thai", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* type scale */
  --text-xs: 0.75rem;    /* 12 */
  --text-sm: 0.8125rem;  /* 13 */
  --text-base: 0.9375rem;/* 15 */
  --text-md: 1.0625rem;  /* 17 */
  --text-lg: 1.25rem;    /* 20 */
  --text-xl: 1.5rem;     /* 24 */
  --text-2xl: 1.875rem;  /* 30 */
  --text-3xl: 2.375rem;  /* 38 */
  --text-4xl: 3rem;      /* 48 */

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.6;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---------- Spacing (4pt base) ---------- */
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */

  /* ---------- Radii ---------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-full: 999px;

  /* ---------- Layout ---------- */
  --sidebar-w: 264px;
  --topbar-h: 68px;
  --content-max: 1360px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.32, 0.72, 0.24, 1);
  --dur-fast: 0.14s;
  --dur: 0.24s;
  --dur-slow: 0.4s;

  /* ============================================================
     LIGHT MODE (default) — กระดาษครีมอุ่น
     ============================================================ */

  /* brand */
  --clay-50:  #fbf1ea;
  --clay-100: #f5ddcd;
  --clay-200: #eabd9f;
  --clay-300: #dd9670;
  --clay-400: #cd7649;
  --clay-500: #bd5e33;   /* primary — terracotta */
  --clay-600: #a44b26;
  --clay-700: #833b1f;
  --clay-800: #602c18;

  --forest-400: #4f7a5f;
  --forest-500: #3c6349;  /* secondary — spine green */
  --forest-600: #2f4e39;

  --gold-400: #d9a441;
  --gold-500: #c68b26;

  /* neutrals — warm paper */
  --paper:      #f6efe4;   /* app background */
  --paper-2:    #efe6d7;   /* recessed */
  --surface:    #fffbf4;   /* cards */
  --surface-2:  #f9f1e4;   /* subtle raised */
  --overlay:    rgba(43, 33, 25, 0.42);

  --line:       #e6d8c4;   /* borders */
  --line-strong:#d8c5a9;

  --ink:        #2c231c;   /* primary text */
  --ink-2:      #5e5145;   /* secondary text */
  --ink-3:      #8a7c6c;   /* muted / captions */
  --ink-inv:    #fdf8f0;   /* text on dark fills */

  /* semantic */
  --primary:    var(--clay-500);
  --primary-hover: var(--clay-600);
  --primary-soft:  var(--clay-50);
  --primary-ink:   #ffffff;

  --accent:     var(--forest-500);
  --accent-soft:#e5ede7;

  --success:    #3f8f5b;
  --success-soft:#e2f0e6;
  --warning:    #c98a1c;
  --warning-soft:#faedcf;
  --danger:     #c0492f;
  --danger-soft:#f8e0d8;
  --info:       #3d6ea5;
  --info-soft:  #e3ecf6;

  /* reading status */
  --status-unread:  #a08a72;
  --status-reading: var(--clay-500);
  --status-done:    var(--forest-500);

  /* ---------- Shadows (warm-tinted) ---------- */
  --shadow-xs: 0 1px 2px rgba(74, 52, 32, 0.06);
  --shadow-sm: 0 2px 6px rgba(74, 52, 32, 0.08);
  --shadow-md: 0 6px 18px rgba(74, 52, 32, 0.10);
  --shadow-lg: 0 16px 40px rgba(58, 40, 24, 0.16);
  --shadow-book: 0 10px 22px rgba(51, 33, 18, 0.24);

  color-scheme: light;
}

/* ============================================================
   DARK MODE — ห้องสมุดยามค่ำ ไม้เข้ม
   เปิดผ่าน [data-theme="dark"] (ปุ่ม) หรือ auto ตามระบบ
   ============================================================ */

:root[data-theme="dark"] {
  --paper:      #17130f;
  --paper-2:    #120f0b;
  --surface:    #211b15;
  --surface-2:  #2a2219;
  --overlay:    rgba(0, 0, 0, 0.58);

  --line:       #362c22;
  --line-strong:#493b2d;

  --ink:        #efe4d4;
  --ink-2:      #c3b4a0;
  --ink-3:      #8f8171;
  --ink-inv:    #1a140f;

  --clay-500:   #d9794a;
  --clay-600:   #c96a3d;
  --primary:    #db8256;
  --primary-hover: #e6926a;
  --primary-soft:  #33231a;
  --primary-ink:   #201009;

  --accent:     #6ea380;
  --accent-soft:#22302a;

  --success:    #5cb079;
  --success-soft:#1e2f24;
  --warning:    #e0ac4f;
  --warning-soft:#332818;
  --danger:     #e06b4d;
  --danger-soft:#361f18;
  --info:       #6f9fd6;
  --info-soft:  #1c2735;

  --status-unread:  #9a8a76;
  --status-reading: #db8256;
  --status-done:    #6ea380;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 8px 22px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.62);
  --shadow-book: 0 12px 26px rgba(0, 0, 0, 0.6);

  color-scheme: dark;
}

/* รองรับ auto ตามระบบ เมื่อผู้ใช้ยังไม่ได้เลือกเอง (data-theme="auto") */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --paper: #17130f;      --paper-2: #120f0b;
    --surface: #211b15;    --surface-2: #2a2219;
    --overlay: rgba(0,0,0,0.58);
    --line: #362c22;       --line-strong: #493b2d;
    --ink: #efe4d4;        --ink-2: #c3b4a0; --ink-3: #8f8171; --ink-inv: #1a140f;
    --clay-500: #d9794a;   --clay-600: #c96a3d;
    --primary: #db8256;    --primary-hover: #e6926a; --primary-soft: #33231a; --primary-ink: #201009;
    --accent: #6ea380;     --accent-soft: #22302a;
    --success: #5cb079;    --success-soft: #1e2f24;
    --warning: #e0ac4f;    --warning-soft: #332818;
    --danger: #e06b4d;     --danger-soft: #361f18;
    --info: #6f9fd6;       --info-soft: #1c2735;
    --status-unread: #9a8a76; --status-reading: #db8256; --status-done: #6ea380;
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.45);
    --shadow-md: 0 8px 22px rgba(0,0,0,0.5);
    --shadow-lg: 0 20px 48px rgba(0,0,0,0.62);
    --shadow-book: 0 12px 26px rgba(0,0,0,0.6);
    color-scheme: dark;
  }
}