/* ============================================================================
   moshikub.com — CI / design tokens
   ============================================================================

   สีแบรนด์คือ #0fa5d9 (โมชิเลือกเอง) — ตัวเดียวกับที่ blog ใช้มาตลอด

   ⚠️ สีนี้สว่าง เลยมีข้อจำกัด 1 อย่างที่ต้องรู้ (วัดตามมาตรฐาน WCAG แล้ว):

        ตัวหนังสือขาว บนพื้น #0fa5d9      2.84:1   🔴 อ่านยาก
        ตัวหนังสือ #0fa5d9 บนพื้นขาว      2.84:1   🔴 อ่านยาก
        ตัวหนังสือ #04242f บนพื้น #0fa5d9  5.70:1   ✅
        ตัวหนังสือ #0a7396 บนพื้นขาว       5.38:1   ✅

   รอบแรกแก้ด้วยการเอา "ตัวหนังสือกรมท่าเข้ม" ไปวางบนพื้นฟ้าสด — ผ่านมาตรฐาน
   แต่โมชิบอกว่าดูไม่สวย ซึ่งถูก: กรมท่าเข้มบนฟ้าสดมันขุ่น เหมือนป้ายเตือน
   ไม่ใช่ปุ่มของแบรนด์

   ทางแก้จริงคือแยกหน้าที่ แทนที่จะให้สีเดียวทำทุกอย่าง:

        --brand        #0fa5d9   สีประจำตัว — ใช้เน้น ขีดเส้นใต้ กราฟ ของประดับ
        --btn          #006ca4   พื้นปุ่ม (ฟ้าตระกูลเดียวกันแต่เข้มลง)
        --btn-on       #ffffff   ตัวหนังสือบนปุ่ม — 5.70:1 ✅ คมและสะอาด
        --btn-hover    #005c8d   ปุ่มตอนชี้
        --brand-text   #0a7396   ตัวหนังสือ/ลิงก์สีฟ้าบนพื้นขาว — 5.38:1 ✅
        --brand-on     #04242f   ตัวหนังสือบนพื้นฟ้าสด (เหลือไว้ใช้กับชิปเล็ก ๆ)

   ผลลัพธ์: ปุ่มเป็นฟ้าเข้มตัวหนังสือขาว อ่านง่ายและดูสะอาด
   ส่วน #0fa5d9 ยังอยู่ทั่วเว็บในฐานะสีเน้น ไม่ได้หายไปไหน
   ============================================================================ */

:root {
  /* --- แบรนด์ ---------------------------------------------------------- */
  --brand:        oklch(0.677 0.133 230.2);   /* #0fa5d9 · สีประจำตัว ใช้เน้น */
  --brand-on:     oklch(0.220 0.035 232.0);   /* #04242f · ตัวหนังสือบนพื้นฟ้าสด */
  --brand-text:   oklch(0.520 0.100 228.6);   /* #0a7396 · ตัวหนังสือฟ้าบนขาว */
  --brand-deep:   oklch(0.430 0.085 228.0);   /* เข้มกว่า ใช้ตอน hover */

  /* --- ปุ่ม ---------------------------------------------------------------
     แยกจาก --brand เพราะพื้นฟ้าสดรับตัวหนังสือขาวไม่ไหว (2.84:1)
     ฟ้าเข้มตัวนี้รับได้ 5.70:1 และยังอยู่ตระกูลสีเดียวกัน */
  --btn:          oklch(0.500 0.135 235);     /* #006ca4 */
  --btn-on:       #fff;
  --btn-hover:    oklch(0.445 0.130 235);     /* #005c8d */
  --btn-ring:     oklch(0.500 0.135 235 / 0.30);
  --brand-wash:   oklch(0.968 0.015 222.7);   /* #eaf7fc · พื้นอ่อน */
  --brand-tint:   oklch(0.984 0.008 225.1);   /* #f4fbfe · พื้นอ่อนมาก */

  /* --- ตัวหนังสือ ------------------------------------------------------- */
  --ink:          oklch(0.245 0.025 235);     /* 15:1 บนขาว */
  --ink-soft:     oklch(0.520 0.022 235);     /* 5.4:1 บนขาว */

  /* --- พื้นหลัง / เส้น --------------------------------------------------- */
  --surface:      oklch(1 0 0);
  --surface-alt:  oklch(0.984 0.006 228);
  --line:         oklch(0.902 0.014 228);
  --line-soft:    oklch(0.945 0.010 228);

  --shadow-sm:    0 1px 2px oklch(0.430 0.085 228 / 0.07),
                  0 2px 8px oklch(0.430 0.085 228 / 0.06);
  --shadow:       0 2px 6px oklch(0.430 0.085 228 / 0.08),
                  0 10px 30px oklch(0.430 0.085 228 / 0.09);

  /* --- โหมดมืด (เผื่อ surface ที่ต้องการ) --------------------------------- */
  --dark-bg:      oklch(0.185 0.030 232);
  --dark-surface: oklch(0.240 0.032 232);
  --dark-line:    oklch(0.325 0.030 232);
  --dark-ink:     oklch(0.960 0.008 232);
  --dark-muted:   oklch(0.755 0.020 232);

  /* --- จังหวะ / รูปทรง ---------------------------------------------------- */
  --radius-sm:    10px;
  --radius:       14px;
  --radius-lg:    22px;

  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:     140ms;
  --dur:          240ms;

  /* --- ลำดับชั้น ---------------------------------------------------------- */
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-backdrop:   300;
  --z-modal:      400;
  --z-toast:      500;
  --z-tooltip:    600;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; }
}