/* ============================================================
   theme.css — Design Tokens (RD Portfolio Hub · Construction Lines)

   โครง 2 ส่วน:
   1) STRUCTURE — โครงคงที่ (font, spacing, radius, z-index, motion)
      → เหมือนกันทุก theme "ห้าม" override ใน [data-theme]
   2) COLORS — สีต่อ theme
      → theme ใหม่ = copy block [data-theme="..."] แล้วแก้เฉพาะสี

   สีตั้งต้นมาจากโลโก้ Construction Lines:
     กรมท่า #14294A · แดง #C1272D · เหลือง #FCD44F
   ทุกค่าในไฟล์นี้คำนวณจาก hue ของ 3 สีนั้นใน OKLCH แล้วตรวจ contrast
   ครบทุกคู่ตาม DESIGN.md §6 (ไม่ได้เลือกด้วยสายตา)

   ⭐ ธีมเริ่มต้นคือ dark — อยู่ใน :root จึงเป็นค่าที่ใช้เมื่อไม่มี data-theme
   กติกาเต็มอยู่ใน DESIGN.md ของโปรเจกต์
   ลำดับโหลด: theme.css ก่อน style.css เสมอ
   ============================================================ */

/* ---------- 1) STRUCTURE — ล็อกทุก theme ---------- */
:root {
  /* Typography (Sarabun โหลดใน style.css · fallback เป็น system ไทย) */
  --font-ui: 'Sarabun', -apple-system, 'Segoe UI', 'Leelawadee UI',
             'Noto Sans Thai', 'Thonburi', sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Type scale — fixed rem (product UI ไม่ใช้ fluid clamp) · ratio ~1.125 */
  --fs-xs:   0.75rem;   /* 12px — caption, badge */
  --fs-sm:   0.8125rem; /* 13px — meta, table dense */
  --fs-base: 0.875rem;  /* 14px — body UI ทั่วไป */
  --fs-md:   1rem;      /* 16px — input (กัน iOS auto-zoom), body ยาว */
  --fs-lg:   1.125rem;  /* 18px — section heading */
  --fs-xl:   1.375rem;  /* 22px — page title */
  --lh-ui:   1.5;       /* label, ปุ่ม, ข้อความสั้น */
  --lh-body: 1.65;      /* ข้อความไทยหลายบรรทัด (อักขระไทยสูง ต้องการ leading เพิ่ม) */

  /* Spacing — ฐาน 4px */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px;

  /* Radius */
  --r-sm: 6px; --r-md: 10px; --r-full: 999px;

  /* Layout — แอปนี้ออกแบบให้จอคอมเป็นหลัก (ดู DESIGN.md §3.1)
     --content-max กันไม่ให้ตารางยืดเต็มจอ ultrawide จนกวาดสายตาตามไม่ทัน */
  --sidebar-w:   260px;
  --topbar-h:    56px;
  --content-max: 1680px;

  /* Z-index scale — ห้ามใช้เลขลอย (999/9999) นอก scale นี้ */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-backdrop: 300;
  --z-modal:    310;
  --z-toast:    400;
  --z-tooltip:  500;

  /* Motion — สื่อ state เท่านั้น ไม่ตกแต่ง */
  --dur-fast: 150ms; --dur-base: 200ms; --dur-slow: 250ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* สีโลโก้ — ใช้กับตราสัญลักษณ์เท่านั้น ค่าคงที่ทุก theme
     (ห้ามเอาไปใช้กับ UI ทั่วไป — UI ต้องใช้ token ที่ปรับตาม theme ข้างล่าง) */
  --brand-navy:   #14294A;
  --brand-red:    #C1272D;
  --brand-yellow: #FCD44F;
}

/* ---------- 2) COLORS ---------- */

/* === Theme: dark (ค่าเริ่มต้นของระบบ — อยู่ใน :root ด้วย) ===
   พื้นหลังดำสนิท เพื่อให้สีที่แสดงตัดกับพื้นให้มากที่สุด

   ⚠️ กับดักของพื้นดำ: ที่ความสว่างต่ำ ๆ อัตราส่วน contrast จะ "บีบตัว"
   ยกพื้นการ์ดจาก L 0.07 ไป 0.19 ได้ ratio แค่ 1.12:1 — การ์ดจมหายไปกับพื้น
   จึงต้องยก --surface กับ --border ขึ้นมากกว่าที่คิด ไม่งั้นหน้าจอจะกลายเป็น
   ข้อความลอยบนความมืดโดยไม่มีโครง (ค่าปัจจุบันวัดแล้ว: การ์ด 1.29:1 · ขอบ 2.14:1)

   พื้นยิ่งมืด ยิ่งดัน accent ให้สว่างได้มากขึ้น — text/bg ตอนนี้ 18.9:1        */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* พื้นผิว */
  --bg:        #010103;   /* พื้นหลังหน้า — ดำสนิท (ประหยัดแบตบนจอ OLED ด้วย) */
  --surface:   #1a212e;   /* card, panel, modal — ต้องลอยออกจากพื้นให้เห็น */
  --surface-2: #0c121c;   /* ชั้นรอง: sidebar, toolbar, thead */
  --border:    #495567;   /* บนพื้นดำ เส้นขอบคือสิ่งที่บอกขอบเขต ต้องเห็นชัดกว่าปกติ */

  /* ตัวอักษร */
  --text:       #f0f4f9;
  --text-muted: #a4adbb;

  /* สีหลัก — กรมท่าแบรนด์ที่ยกความสว่างขึ้นให้อ่านออกบนพื้นดำ */
  --primary:       #8cb9ff;
  --primary-hover: #b6d3ff;
  --primary-text:  #020713;  /* ตัวอักษรบนพื้น primary */
  --primary-soft:  #192e4e;  /* พื้นอ่อน: selected row, active nav */
  --focus:         #8cb9ff;  /* วงแหวน focus-visible */
  --glow:          rgba(140, 185, 255, .45);  /* เรืองแสง — เฉพาะจุดสำคัญ ดูกติกาที่ style.css §1.1 */

  /* Semantic states — error/warning สืบทอด hue จากแดงและเหลืองของโลโก้
     พื้นอ่อนทั้งสี่ตั้งที่ความสว่างเท่ากัน badge จึงดูน้ำหนักเสมอกัน */
  --success:    #58e080;  --success-bg: #14331c;
  --error:      #ff7e77;  --error-bg:   #451e1c;
  --warning:    #ffd334;  --warning-bg: #352a04;
  --info:       #96bfff;  --info-bg:    #1a2b46;

  /* เงา — บนพื้นดำเงาแทบไม่มีผล ความลึกมาจาก surface + border แทน */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .55);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, .70);

  /* รางของ progress bar / meter */
  --track: #2a323e;

  /* โทนประจำตัวสมาชิก — วงแหวน avatar + จุดนำสายตา
     ⚠️ สีเป็นช่องทาง "รอง" เท่านั้น ทุกจุดต้องมีอักษรย่อหรือชื่อกำกับ
     ชุดนี้ผ่าน validator: lightness band · chroma floor · CVD · contrast */
  --tone-1: #00a79a;
  --tone-2: #e35f6c;
  --tone-3: #7983f3;
  --tone-4: #de6b1d;
  --tone-5: #a574e3;
  --tone-6: #29ab57;
}

/* === Theme: light — กรมท่าแบรนด์เป็นสีหลักเต็ม ๆ === */
[data-theme="light"] {
  color-scheme: light;

  --bg:        #f2f5f9;
  --surface:   #ffffff;
  --surface-2: #e7ebf1;
  --border:    #cdd4de;

  --text:       #19273c;
  --text-muted: #596579;

  --primary:       #14294a;   /* กรมท่าจากโลโก้ ใช้ตรง ๆ */
  --primary-hover: #243d64;
  --primary-text:  #ffffff;
  --primary-soft:  #e2eeff;
  --focus:         #14294a;
  --glow:          rgba(20, 41, 74, .16);  /* จางกว่า dark มาก — พื้นสว่างไม่ควรมีวงเรืองแสงชัด */

  --success:    #007f38;  --success-bg: #e0f7e4;
  --error:      #a92227;  --error-bg:   #ffe8e6;
  --warning:    #6f5800;  --warning-bg: #fdf0c7;
  --info:       #1e57ad;  --info-bg:    #e5efff;

  --shadow-1: 0 1px 2px rgba(20, 41, 74, .07);
  --shadow-2: 0 8px 24px rgba(20, 41, 74, .16);

  --track: #dae0e9;

  --tone-1: #0d9488;
  --tone-2: #be123c;
  --tone-3: #4f46e5;
  --tone-4: #b45309;
  --tone-5: #9333ea;
  --tone-6: #15803d;
}

/* === Theme: contrast — ความคมชัดสูงสุด สำหรับหน้างานและสายตาที่ล้า ===
   ไม่ใช่ "dark ที่มืดกว่า" — เป็นธีมคนละแบบที่ยอมทิ้งความนุ่มนวลเพื่อความชัด:

   · โครงหน้าจอมาจาก **เส้นขอบ** ไม่ใช่ระดับความสว่างของพื้น — การ์ดพื้นเกือบดำเท่ากับพื้นหลัง
     แต่มีขอบสว่าง 13:1 ล้อมอยู่ จึงเห็นขอบเขตชัดแม้ในที่แดดจ้าหรือบนจอที่ปรับสีเพี้ยน
   · accent ใช้เหลืองแบรนด์เป็น --primary (ไม่ใช่ฟ้า) เพราะบนพื้นดำสนิทเหลืองให้ 14.7:1
     ซึ่งสูงกว่าฟ้าที่ธีม dark ใช้ และแยกออกจาก --info (ฟ้าอ่อน) ได้ชัดในตัวเอง
   · --text-muted ตั้งไว้สูงถึง 16:1 โดยตั้งใจ — ธีมนี้ไม่มีข้อความ "จาง"
     ลำดับความสำคัญสื่อด้วยขนาดและตำแหน่งแทน

   วิธีเพิ่ม theme ใหม่ (ดู DESIGN.md §4 ประกอบ):
   1. copy block นี้ เปลี่ยนชื่อ + แก้สี (แก้ "เฉพาะสี" — โครงห้ามแตะ)
   2. เช็ค contrast ทุกคู่ใน DESIGN.md §6 ให้ผ่าน
   3. เพิ่มชื่อใน themeOptions() ของ helpers.php (whitelist ที่ api/set_theme.php ใช้ด้วย)
   4. เพิ่มคอลัมน์สีในตาราง DESIGN.md §4                                   */
[data-theme="contrast"] {
  color-scheme: dark;

  --bg:        #000000;
  --surface:   #0a0a0a;   /* การ์ดแทบไม่ต่างจากพื้น — ความต่างมาจาก --border */
  --surface-2: #1c1c1c;
  --border:    #c8c8c8;   /* 13.0:1 กับพื้น — เส้นคือโครงของธีมนี้ */

  --text:       #ffffff;  /* 21:1 */
  --text-muted: #e2e2e2;  /* 16.4:1 — ธีมนี้ไม่มีข้อความจาง */

  --primary:       #fcd44f;  /* เหลืองแบรนด์ · 14.7:1 บนพื้นดำ */
  --primary-hover: #ffe58a;
  --primary-text:  #000000;  /* 14.7:1 บนพื้นเหลือง */
  --primary-soft:  #3a2f00;  /* พื้นอ่อน: selected row, active nav — ตัวอักษรขาวได้ 13.4:1 */
  --focus:         #fcd44f;
  --glow:          rgba(252, 212, 79, .5);

  --success:    #5fff9a;  --success-bg: #002d12;
  --error:      #ff9c93;  --error-bg:   #3d0d0a;
  --warning:    #ffb84d;  --warning-bg: #3a2600;
  --info:       #7fd4ff;  --info-bg:    #002b3d;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .8);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, .9);

  /* รางต้องเห็นเองบนพื้นดำ ไม่งั้นหลอดที่ว่างจะหายไปทั้งแท่ง
     วัดแล้ว 3.72:1 กับ --surface — ผ่านเกณฑ์ 3:1 ของส่วนประกอบที่ไม่ใช่ตัวอักษร (WCAG 1.4.11)
     ค่าเดิม #555 ได้ 2.66:1 ซึ่งไม่ผ่าน */
  --track: #6b6b6b;

  --tone-1: #40e0d0;
  --tone-2: #ff8fa3;
  --tone-3: #a5b4ff;
  --tone-4: #ffb067;
  --tone-5: #dda0ff;
  --tone-6: #7be38b;
}