/* ==========================================================================
   rachadej-ui — tokens.css
   ต้นแบบภาษาภาพ: DevFlow Service Portal (รพ.สิรินธร)
   CSS ล้วน ไม่พึ่ง Tailwind/Bootstrap — ใช้กับโปรเจกต์ PHP/HTML ใดก็ได้

   ธีม: blue (ค่าเริ่มต้น) · purple · orange
   สลับด้วย  <html data-theme="purple">  หรือ  document.documentElement.dataset.theme
   ========================================================================== */

@import url('../fonts/local-fonts.css');
@import url('../fonts/thsarabunnew/thsarabunnew.css');

:root {
  /* ---------- พื้นผิวและตัวอักษร (คงที่ทุกธีม) ---------- */
  --rui-canvas:        #f1f5f9;
  --rui-canvas-alt:    #f8fafc;
  --rui-surface:       #ffffff;
  --rui-surface-soft:  #f8fafc;
  --rui-text:          #1f2937;
  --rui-text-strong:   #0f172a;
  --rui-muted:         #64748b;
  --rui-line:          #e2e8f0;
  --rui-line-subtle:   rgba(15, 23, 42, .07);
  --rui-line-strong:   #cbd5e1;

  /* ---------- สีสื่อความหมาย (คงที่ทุกธีม) ---------- */
  --rui-success:       #059669;
  --rui-success-soft:  #ecfdf5;
  --rui-warning:       #b45309;
  --rui-warning-soft:  #fffbeb;
  --rui-danger:        #dc2626;
  --rui-danger-soft:   #fef2f2;
  --rui-info:          #0369a1;
  --rui-info-soft:     #f0f9ff;

  /* ---------- ตัวอักษร ---------- */
  --rui-font: "Sarabun", "Noto Sans Thai", "Inter", system-ui, -apple-system, sans-serif;
  --rui-font-print: "TH Sarabun New", serif;
  --rui-font-num: "Inter", "Sarabun", ui-monospace, sans-serif;
  --rui-fs-xs: .8rem;
  --rui-fs-sm: .9rem;
  --rui-fs-md: 1rem;
  --rui-fs-lg: 1.05rem;
  --rui-fs-xl: 1.3rem;
  --rui-fs-2xl: 1.7rem;

  /* ---------- ระยะห่าง ---------- */
  --rui-space-1: .25rem;
  --rui-space-2: .5rem;
  --rui-space-3: .75rem;
  --rui-space-4: 1rem;
  --rui-space-5: 1.25rem;
  --rui-space-6: 1.5rem;
  --rui-space-8: 2rem;
  --rui-space-10: 2.5rem;
  --rui-space-12: 3rem;

  /* ---------- ความโค้ง (DevFlow ใช้มุมมนกว้าง) ---------- */
  --rui-radius-sm: 8px;
  --rui-radius-md: 12px;
  --rui-radius-lg: 16px;
  --rui-radius-xl: 22px;
  --rui-radius-2xl: 24px;
  --rui-radius-pill: 999px;

  /* ---------- เงา (นุ่ม ฟุ้ง หลายชั้นสไตล์ Luxury) ---------- */
  --rui-shadow-sm: 0 1px 3px rgba(15, 23, 42, .03), 0 4px 10px -2px rgba(15, 23, 42, .04);
  --rui-shadow:    0 2px 6px rgba(15, 23, 42, .03), 0 10px 24px -5px rgba(15, 23, 42, .06);
  --rui-shadow-lg: 0 4px 10px rgba(15, 23, 42, .04), 0 18px 36px -8px rgba(15, 23, 42, .09);
  --rui-shadow-xl: 0 8px 24px rgba(15, 23, 42, .05), 0 28px 60px -16px rgba(15, 23, 42, .14);

  /* ---------- จังหวะการเคลื่อนไหว ---------- */
  --rui-ease: cubic-bezier(.2, .7, .2, 1);
  --rui-fast: .16s var(--rui-ease);
  --rui-base: .24s var(--rui-ease);

  /* ---------- ขนาดโครงหน้า (Widescreen ตาม DevFlow) ---------- */
  --rui-header-h: 64px;
  --rui-sidebar-w: 250px;
  --rui-sidebar-w-full: 250px;
  --rui-sidebar-w-rail: 76px;
  --rui-shell-max: 1720px;
  --rui-shell-2xl: 1840px;
  --rui-tap: 44px;          /* touch target ขั้นต่ำตาม design.md */

  /* ---------- สีสำหรับ Dark Footer ระดับองค์กร (ตาม DevFlow) ---------- */
  --rui-footer-bg:          #0f172a;
  --rui-footer-surface:     #1e293b;
  --rui-footer-text:        #b4c0d2;
  --rui-footer-text-strong: #f1f5f9;
  --rui-footer-line:        rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   ธีม — เปลี่ยนเฉพาะสีหลักและแถบไล่สี พื้นผิว/ตัวอักษรคงเดิม
   ========================================================================== */

/* ---- Blue (ค่าเริ่มต้น - ถอดรหัสสีจาก DevFlow) ---- */
:root,
:root[data-theme="blue"] {
  --rui-primary:        #2563eb;
  --rui-primary-strong: #1d4ed8;
  --rui-primary-deep:   #1e3a8a;
  --rui-primary-soft:   #eff6ff;
  --rui-primary-line:   #bfdbfe;
  --rui-on-primary:     #ffffff;
  --rui-grad-from:      #172554;
  --rui-grad-via:       #1e40af;
  --rui-grad-to:        #2563eb;
  --rui-hero-from:      #4f46e5;
  --rui-hero-via:       #3b82f6;
  --rui-hero-to:        #06b6d4;
  --rui-ring:           rgba(37, 99, 235, .35);
}

/* ---- Purple ---- */
:root[data-theme="purple"] {
  --rui-primary:        #7c3aed;
  --rui-primary-strong: #6d28d9;
  --rui-primary-deep:   #4c1d95;
  --rui-primary-soft:   #f5f3ff;
  --rui-primary-line:   #ddd6fe;
  --rui-on-primary:     #ffffff;
  --rui-grad-from:      #2e1065;
  --rui-grad-via:       #4c1d95;
  --rui-grad-to:        #7c3aed;
  --rui-hero-from:      #5b21b6;
  --rui-hero-via:       #7c3aed;
  --rui-hero-to:        #db2777;
  --rui-ring:           rgba(124, 58, 237, .35);
}

/* ---- Orange ---- */
:root[data-theme="orange"] {
  --rui-primary:        #ea580c;
  --rui-primary-strong: #c2410c;
  --rui-primary-deep:   #7c2d12;
  --rui-primary-soft:   #fff7ed;
  --rui-primary-line:   #fed7aa;
  --rui-on-primary:     #ffffff;
  --rui-grad-from:      #431407;
  --rui-grad-via:       #7c2d12;
  --rui-grad-to:        #ea580c;
  --rui-hero-from:      #9a3412;
  --rui-hero-via:       #ea580c;
  --rui-hero-to:        #fbbf24;
  --rui-ring:           rgba(234, 88, 12, .35);
}

/* ---- Saturday (วันเสาร์มงคล) — ธีมมืด คัดลอกจาก Rachadej Platform
   พื้นกรมท่า #0f172a · เน้นม่วง #c084fc + ฟ้า #38bdf8 · ตัวเสริมอยู่ใน theme-saturday.css ---- */
:root[data-theme="saturday"] {
  --rui-canvas:        #0f172a;
  --rui-canvas-alt:    #0b1224;
  --rui-surface:       #111c33;
  --rui-surface-soft:  #17243d;
  --rui-text:          #e2e8f0;
  --rui-text-strong:   #f8fafc;
  --rui-muted:         #94a3b8;
  --rui-line:          rgba(255, 255, 255, .12);
  --rui-line-subtle:   rgba(255, 255, 255, .08);
  --rui-line-strong:   rgba(192, 132, 252, .38);

  --rui-success:       #34d399;
  --rui-success-soft:  rgba(52, 211, 153, .14);
  --rui-warning:       #fbbf24;
  --rui-warning-soft:  rgba(251, 191, 36, .14);
  --rui-danger:        #f87171;
  --rui-danger-soft:   rgba(248, 113, 113, .14);
  --rui-info:          #38bdf8;
  --rui-info-soft:     rgba(56, 189, 248, .14);

  --rui-primary:        #a855f7;
  --rui-primary-strong: #d8b4fe;
  --rui-primary-deep:   #6b21a8;
  --rui-primary-soft:   rgba(168, 85, 247, .16);
  --rui-primary-line:   rgba(192, 132, 252, .42);
  --rui-on-primary:     #ffffff;
  --rui-grad-from:      #0f172a;
  --rui-grad-via:       #3b1d6e;
  --rui-grad-to:        #7e22ce;
  --rui-hero-from:      #0c4a6e;
  --rui-hero-via:       #6d28d9;
  --rui-hero-to:        #0ea5e9;
  --rui-ring:           rgba(56, 189, 248, .5);

  --rui-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --rui-shadow:    0 8px 20px -8px rgba(0, 0, 0, .55);
  --rui-shadow-lg: 0 14px 30px -10px rgba(0, 0, 0, .6);
  --rui-shadow-xl: 0 26px 60px -18px rgba(0, 0, 0, .7);
}
/* สีประจำหมวดบนพื้นมืด: พื้นอ่อนของหมวดเป็นแบบโปร่งแทนสีพาสเทลทึบ */
:root[data-theme="saturday"] [class*="rui-c-"] { --rui-c-soft: color-mix(in srgb, var(--rui-c) 18%, transparent); }

/* ==========================================================================
   สีประจำหมวด (accent) — คงที่ทุกธีม เพราะใช้แยก "ประเภทงาน" ไม่ใช่แบรนด์
   ใช้กับ .rui-tile, .rui-section, .rui-icon-box ผ่าน class .rui-c-<ชื่อ>
   ========================================================================== */

[class*="rui-c-"] { --rui-c: var(--rui-primary); --rui-c-soft: var(--rui-primary-soft); --rui-c-to: var(--rui-grad-to); }

.rui-c-blue    { --rui-c: #2563eb; --rui-c-soft: #eff6ff; --rui-c-to: #6366f1; }
.rui-c-indigo  { --rui-c: #4f46e5; --rui-c-soft: #eef2ff; --rui-c-to: #8b5cf6; }
.rui-c-purple  { --rui-c: #7c3aed; --rui-c-soft: #f5f3ff; --rui-c-to: #d946ef; }
.rui-c-emerald { --rui-c: #059669; --rui-c-soft: #ecfdf5; --rui-c-to: #2dd4bf; }
.rui-c-teal    { --rui-c: #0d9488; --rui-c-soft: #f0fdfa; --rui-c-to: #34d399; }
.rui-c-amber   { --rui-c: #d97706; --rui-c-soft: #fffbeb; --rui-c-to: #fbbf24; }
.rui-c-orange  { --rui-c: #ea580c; --rui-c-soft: #fff7ed; --rui-c-to: #fb923c; }
.rui-c-rose    { --rui-c: #e11d48; --rui-c-soft: #fff1f2; --rui-c-to: #fb7185; }
.rui-c-cyan    { --rui-c: #0891b2; --rui-c-soft: #ecfeff; --rui-c-to: #22d3ee; }
.rui-c-slate   { --rui-c: #475569; --rui-c-soft: #f8fafc; --rui-c-to: #94a3b8; }