/* ═══════════════════════════════════════════════════════════════
   TLA — ชุดสีของแบรนด์สมาคมห้องสมุดแห่งประเทศไทยฯ
   โหลดทุกหน้าของเว็บไซต์ (ดู themes/magazine/partials/_head.php)

   ม่วงเข้ม  = สีหลัก      โดดเด่น เป็นทางการ
   ขาว       = พื้นหลัง     สะอาดตา อ่านง่าย
   เขียว     = สีเน้น       ปุ่มและข้อความที่ต้องการให้สังเกตเห็น
   ม่วงอ่อน  = สีรอง        พื้นหลังส่วนย่อยและการแบ่งพาร์ทข้อมูล
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ── ม่วง (Primary) ─────────────────────────────────────── */
    --tla-purple-900: #2E1065;
    --tla-purple-800: #4C1D95;
    --tla-purple-700: #5B21B6;
    --tla-purple-600: #6D28D9;
    --tla-purple-500: #7C3AED;
    --tla-purple-400: #A78BFA;

    /* ── ม่วงอ่อน (Secondary / พื้นหลังส่วนย่อย) ──────────────── */
    --tla-purple-100: #EDE9FE;
    --tla-purple-050: #F5F3FF;

    /* ── เขียว (Accent / ปุ่มเน้น) ───────────────────────────── */
    --tla-green-700: #047857;
    --tla-green-600: #059669;
    --tla-green-500: #10B981;
    --tla-green-100: #D1FAE5;
    --tla-green-050: #ECFDF5;

    /* ── กลาง ───────────────────────────────────────────────── */
    --tla-ink: #1E1B33;
    --tla-muted: #6B7280;
    --tla-line: #E6E1F5;
    --tla-surface: #FFFFFF;

    /* ── สถานะ ──────────────────────────────────────────────── */
    --tla-warning: #B45309;
    --tla-warning-bg: #FEF3C7;
    --tla-danger: #B91C1C;
    --tla-danger-bg: #FEE2E2;
    --tla-success: var(--tla-green-700);
    --tla-success-bg: var(--tla-green-100);
}

/* ═══════════════════════════════════════════════════════
   KENDO UI — ปรับตัวแปรของธีมให้เป็นม่วง
   ทุกคอมโพเนนต์ของ Kendo จะรับสีใหม่ตามนี้โดยอัตโนมัติ
═══════════════════════════════════════════════════════ */
:root {
    --kendo-color-primary: var(--tla-purple-600);
    --kendo-color-primary-hover: var(--tla-purple-700);
    --kendo-color-primary-active: var(--tla-purple-800);
    --kendo-color-primary-emphasis: var(--tla-purple-400);
    --kendo-color-primary-subtle: var(--tla-purple-100);
    --kendo-color-primary-subtle-hover: #E0D9FD;
    --kendo-color-primary-on-subtle: var(--tla-purple-900);
    --kendo-color-on-primary: #ffffff;
    --kendo-color-primary-on-surface: var(--tla-purple-700);

    --kendo-color-success: var(--tla-green-600);
    --kendo-color-success-hover: var(--tla-green-700);
    --kendo-color-success-subtle: var(--tla-green-100);
    --kendo-color-success-on-subtle: var(--tla-green-700);

    --kendo-color-warning: #D97706;
    --kendo-color-warning-subtle: var(--tla-warning-bg);
    --kendo-color-warning-on-subtle: var(--tla-warning);

    --kendo-color-error: #DC2626;
    --kendo-color-error-subtle: var(--tla-danger-bg);
    --kendo-color-error-on-subtle: var(--tla-danger);

    --kendo-color-info: var(--tla-purple-500);
    --kendo-color-info-subtle: var(--tla-purple-100);
    --kendo-color-info-on-subtle: var(--tla-purple-800);

    /* ธีมเดิมตั้งพื้นหลังช่องกรอกและเส้นขอบเป็นโทนเขียวอ่อน
       เปลี่ยนเป็นโทนกลาง/ม่วงอ่อนให้เข้ากับแบรนด์ใหม่ */
    --kendo-color-base: #F7F5FC;
    --kendo-color-base-hover: var(--tla-purple-050);
    --kendo-color-base-active: var(--tla-purple-100);
    --kendo-color-base-subtle: var(--tla-purple-050);
    --kendo-color-surface: #FAFAFC;
    --kendo-color-surface-alt: #FFFFFF;
    --kendo-color-border: var(--tla-line);
    --kendo-color-border-alt: #D6CEEE;
    --kendo-color-on-app-surface: var(--tla-ink);
    --kendo-color-app-surface: #FFFFFF;
}

/* ═══════════════════════════════════════════════════════
   ธีมหลักของเว็บไซต์ (Varient CMS)
   ตัวแปร --vr-theme-color ถูกกำหนดจากหน้าตั้งค่าธีม
   ส่วนที่เหลือปรับให้เข้ากับโทนม่วงตรงนี้
═══════════════════════════════════════════════════════ */
:root {
    --vr-topbar-text-color: #DDD6FE;
    --vr-topbar-text-color-hover: #FFFFFF;
}

/* แถบบนสุดและเมนูหลักเป็นม่วงเข้ม */
.top-bar,
.mobile-nav-wrapper .mobile-header {
    background-color: var(--tla-purple-900) !important;
}

/* ปุ่มหลักทั่วเว็บไซต์ */
.btn-primary,
.btn-nav-subscribe {
    background-color: var(--tla-purple-600) !important;
    border-color: var(--tla-purple-600) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-nav-subscribe:hover {
    background-color: var(--tla-purple-700) !important;
    border-color: var(--tla-purple-700) !important;
}

/* ปุ่มหลักของ Kendo คือปุ่มลงมือทำ (ถัดไป / ยืนยัน / สมัคร)
   โจทย์กำหนดให้ใช้สีเขียวเป็นสีเน้นสำหรับปุ่มที่ต้องการให้สังเกตเห็น
   จึงเขียนทับค่าที่ตั้งไว้ใน kendo-theme-overrides.css ให้เป็นเขียวชุดใหม่ */
.k-button-solid-primary {
    background-color: var(--tla-green-600);
    border-color: var(--tla-green-600);
    color: #fff;
}

.k-button-solid-primary:hover,
.k-button-solid-primary.k-hover,
.k-button-solid-primary:active,
.k-button-solid-primary.k-active {
    background-color: var(--tla-green-700);
    border-color: var(--tla-green-700);
}

/* ปุ่มรองใช้โทนม่วง */
.k-button-outline-primary {
    color: var(--tla-purple-700);
    border-color: var(--tla-purple-400);
}

/* ปุ่มเน้น (call to action) ใช้สีเขียว ให้ต่างจากปุ่มทั่วไปอย่างชัดเจน */
.btn-accent,
.tla-btn-accent {
    background-color: var(--tla-green-600) !important;
    border-color: var(--tla-green-600) !important;
    color: #fff !important;
}

.btn-accent:hover,
.tla-btn-accent:hover {
    background-color: var(--tla-green-700) !important;
    border-color: var(--tla-green-700) !important;
}

/* ส่วนย่อยที่ต้องการแยกพาร์ทข้อมูล ใช้ม่วงอ่อนเป็นพื้นหลัง */
.tla-section-alt {
    background-color: var(--tla-purple-050);
}

/* custom.css ของชุดมockup เดิมตั้งพื้นหลังเว็บเป็นไล่เฉดเขียวไว้
   โจทย์กำหนดให้พื้นหลังเป็นสีขาว จึงเขียนทับตรงนี้ */
body {
    background: #FFFFFF;
    color: var(--tla-ink);
}