/* ═══════════════════════════════════════════════════════════════════════════
   theme.css — อัตลักษณ์องค์กร (CI) ของระบบ AI ช่วยคัดกรองทางการแพทย์

   ทุกค่าสีในไฟล์นี้ผ่านการตรวจ contrast กับพื้นขาวแล้ว ตัวเลขที่กำกับไว้คืออัตราส่วนจริง
   เกณฑ์ที่ใช้: ตัวอักษรขนาดปกติต้อง >= 4.5:1  ส่วนเส้น/พื้น/ไอคอนต้อง >= 3:1 (WCAG AA)

   ไฟล์นี้นิยาม "โทเคน" อย่างเดียว ไม่มีการจัดหน้า — หน้าใดจะใช้ก็ import แล้วอ้างตัวแปร
   ห้ามเขียนค่าสีตรง ๆ ในหน้าเว็บ ให้เพิ่มโทเคนที่นี่แทน จะได้เปลี่ยนธีมที่เดียวจบ

   ความสัมพันธ์กับ app.css — app.css เป็นชั้นเดิมของหน้า portal ใช้โทนเทาอมอุ่น
   ไฟล์นี้ไม่ทับค่าใด ๆ ของ app.css ใช้ร่วมกันได้ทั้งสองไฟล์
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── สีแบรนด์ — ฟ้าเข้มโทนการแพทย์ ──────────────────────────────────────
     เลือกโทนฟ้าเพราะต่อยอดจาก accent เดิมของ portal (#2a78d6) ได้โดยไม่ขัดกัน
     และเป็นโทนที่ใช้กันทั่วไปในงานสุขภาพ สื่อถึงความสะอาดและความน่าเชื่อถือ */
  --ci-brand-050: #f0f7fa;   /* พื้นอ่อนของ section              1.08:1 */
  --ci-brand-100: #ddecf5;   /* พื้นของการ์ด / แถบ                1.21:1 */
  --ci-brand-200: #b6d7e9;   /* เส้นคั่นบนพื้นอ่อน                1.51:1 */
  --ci-brand-400: #519fcb;   /* กราฟิกประกอบ ห้ามใช้เป็นตัวอักษร  2.93:1 */
  --ci-brand-500: #0e7bb8;   /* สีหลัก — ปุ่ม พื้นเข้ม            4.62:1 */
  --ci-brand-600: #0b679a;   /* ตัวอักษรลิงก์ ปุ่มตอน hover       6.14:1 */
  --ci-brand-700: #095680;   /* หัวข้อ                            7.91:1 */
  --ci-brand-800: #074263;   /* พื้นเข้มสุด เช่น footer          10.67:1 */

  /* ── สีประจำระบบวินิจฉัย ───────────────────────────────────────────────
     ยกมาจากสีที่แต่ละหน้าใช้อยู่แล้ว ไม่ได้คิดใหม่ เพื่อให้ผู้ใช้จำความเชื่อมโยงได้
     แต่ละระบบมีสองค่า: -fill สำหรับพื้น/ไอคอน  -text สำหรับตัวอักษร
     สีเดิม 3 ใน 5 ตัวมี contrast ไม่ถึง 4.5:1 จึงใช้เป็นตัวอักษรตรง ๆ ไม่ได้ */
  --ci-dental-fill: #00b4d8;  --ci-dental-text: #007d97;  /* 2.46 / 4.79 */
  --ci-skin-fill:   #e67e22;  --ci-skin-text:   #ae5f19;  /* 2.85 / 4.72 */
  --ci-spine-fill:  #0f9f68;  --ci-spine-text:  #0c8758;  /* 3.40 / 4.54 */
  --ci-osteo-fill:  #8a2be2;  --ci-osteo-text:  #7b26c9;  /* 5.96 / 7.09 */
  --ci-stroke-fill: #d32f2f;  --ci-stroke-text: #bd2a2a;  /* 4.98 / 5.95 */

  /* ── สีกลาง ──────────────────────────────────────────────────────────── */
  --ci-page:     #f7f9fb;
  --ci-surface:  #ffffff;
  --ci-raised:   #ffffff;
  --ci-ink:      #10161c;   /* 16.9:1 */
  --ci-ink-2:    #46505a;   /*  8.4:1 */
  --ci-ink-3:    #6b7580;   /*  4.8:1 — ยังใช้เป็นตัวอักษรได้ */
  --ci-line:     #e3e9ef;
  --ci-line-2:   #cbd5df;

  /* ── พื้นเข้มสำหรับส่วนที่กลับสี เช่น footer ─────────────────────────────
     แยกออกมาเป็นโทเคนของตัวเองโดยตั้งใจ ห้ามใช้ --ci-brand-700/800 เป็นพื้นหลัง
     เพราะ ramp ของแบรนด์ "กลับด้าน" ในโหมดมืด (800 เป็นค่าที่เข้มสุดในโหมดสว่าง
     แต่เป็นค่าที่สว่างสุดในโหมดมืด เพราะออกแบบมาให้เป็นสีตัวอักษร)
     เคยใช้ผิดมาแล้ว ผลคือ footer ในโหมดมืดได้ contrast 1.09:1 คือมองไม่เห็นเลย */
  --ci-invert-bg:    #074263;   /* ขาวบนสีนี้ 10.67:1 */
  --ci-invert-ink:   #ffffff;
  --ci-invert-ink-2: #cfe3ef;   /*  8.07:1 */
  --ci-invert-link:  #a9d3ea;   /*  6.70:1 */
  --ci-invert-rule:  rgba(255,255,255,.16);

  /* ── สีสถานะ ─────────────────────────────────────────────────────────── */
  --ci-good:     #0c7a43;
  --ci-warn:     #9a6207;
  --ci-danger:   #b3261e;
  --ci-warn-bg:  #fff8e6;
  --ci-danger-bg:#fdeceb;

  /* ── ตัวอักษร ────────────────────────────────────────────────────────── */
  --ci-font: 'Anuphan', system-ui, -apple-system, 'Segoe UI', 'Noto Sans Thai', sans-serif;
  --ci-fs-hero:  clamp(2rem, 1.2rem + 2.6vw, 3.1rem);
  --ci-fs-h1:    clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  --ci-fs-h2:    clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --ci-fs-lead:  clamp(1.02rem, .97rem + .3vw, 1.18rem);
  --ci-fs-body:  1rem;
  --ci-fs-small: .875rem;
  --ci-lh-tight: 1.25;
  --ci-lh-body:  1.7;

  /* ── ระยะและรูปทรง ───────────────────────────────────────────────────── */
  --ci-gap-1: 8px;   --ci-gap-2: 16px;  --ci-gap-3: 24px;
  --ci-gap-4: 40px;  --ci-gap-5: 64px;  --ci-gap-6: 96px;
  --ci-r-sm: 8px;    --ci-r-md: 14px;   --ci-r-lg: 20px;  --ci-r-pill: 999px;
  --ci-maxw: 1140px;

  --ci-shadow-1: 0 1px 2px rgba(16,22,28,.05), 0 2px 8px rgba(16,22,28,.04);
  --ci-shadow-2: 0 2px 4px rgba(16,22,28,.06), 0 12px 28px rgba(16,22,28,.08);
  --ci-ring: 0 0 0 3px rgba(14,123,184,.30);
}

/* ── โหมดมืด ────────────────────────────────────────────────────────────
   สลับเฉพาะสีกลาง สีแบรนด์และสีประจำระบบขยับให้สว่างขึ้นเพื่อให้ contrast
   บนพื้นเข้มยังผ่านเกณฑ์ — สีเดิมที่เข้มพอบนพื้นขาวจะจมหายบนพื้นดำ */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    --ci-page:    #0d1218;
    --ci-surface: #141b23;
    --ci-raised:  #1a222c;
    --ci-ink:     #f2f5f8;
    --ci-ink-2:   #b9c4cf;
    --ci-ink-3:   #8b97a3;
    --ci-line:    #263140;
    --ci-line-2:  #364456;

    --ci-brand-050: #0f1a22;
    --ci-brand-100: #14232e;
    --ci-brand-200: #234356;
    --ci-brand-500: #3fa3dd;
    --ci-brand-600: #63b7e6;
    --ci-brand-700: #8fcbee;
    --ci-brand-800: #b6dcf3;

    --ci-dental-text: #35c8e6;
    --ci-skin-text:   #f0954a;
    --ci-spine-text:  #35c48c;
    --ci-osteo-text:  #b47cf0;
    --ci-stroke-text: #f06a63;

    --ci-invert-bg:    #123047;   /* ต่างจากพื้นหน้า 1.38x · ขาวบนสีนี้ 13.64:1 */
    --ci-invert-ink:   #eaf2f8;
    --ci-invert-ink-2: #a8c2d4;   /*  7.36:1 */
    --ci-invert-link:  #7fc0e6;
    --ci-invert-rule:  rgba(255,255,255,.12);

    --ci-good:   #45c47f;
    --ci-warn:   #e5b25c;
    --ci-danger: #f0736a;
    --ci-warn-bg:  #2a2113;
    --ci-danger-bg:#2c1715;

    --ci-shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
    --ci-shadow-2: 0 2px 4px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.4);
  }
}

/* บังคับโหมดมืดด้วยปุ่มสลับธีม — ต้องมีบล็อกนี้แยกจาก @media ข้างบน
   เพราะ media query ตอบตามค่าของระบบเท่านั้น ผู้ใช้ที่เครื่องตั้งเป็นโหมดสว่าง
   แล้วกดปุ่มเลือกโหมดมืดจะไม่มีผลถ้าไม่มีตัวเลือกนี้
   ⚠️ ค่าในบล็อกนี้ต้องตรงกับบล็อก @media ข้างบนเสมอ แก้ที่หนึ่งต้องแก้อีกที่ด้วย */
:root[data-theme="dark"] {
  --ci-page:    #0d1218;
  --ci-surface: #141b23;
  --ci-raised:  #1a222c;
  --ci-ink:     #f2f5f8;
  --ci-ink-2:   #b9c4cf;
  --ci-ink-3:   #8b97a3;
  --ci-line:    #263140;
  --ci-line-2:  #364456;

  --ci-brand-050: #0f1a22;
  --ci-brand-100: #14232e;
  --ci-brand-200: #234356;
  --ci-brand-500: #3fa3dd;
  --ci-brand-600: #63b7e6;
  --ci-brand-700: #8fcbee;
  --ci-brand-800: #b6dcf3;

  --ci-dental-text: #35c8e6;
  --ci-skin-text:   #f0954a;
  --ci-spine-text:  #35c48c;
  --ci-osteo-text:  #b47cf0;
  --ci-stroke-text: #f06a63;

  --ci-invert-bg:    #123047;   /* ต่างจากพื้นหน้า 1.38x · ขาวบนสีนี้ 13.64:1 */
  --ci-invert-ink:   #eaf2f8;
  --ci-invert-ink-2: #a8c2d4;   /*  7.36:1 */
  --ci-invert-link:  #7fc0e6;
  --ci-invert-rule:  rgba(255,255,255,.12);

  --ci-good:   #45c47f;
  --ci-warn:   #e5b25c;
  --ci-danger: #f0736a;
  --ci-warn-bg:  #2a2113;
  --ci-danger-bg:#2c1715;

  --ci-shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
  --ci-shadow-2: 0 2px 4px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.4);
}