/* Hallmark · tokens · theme: custom (tuned) · anchor: CI #055c37 = oklch(41.9% 0.097 157.4)
 * axes: light paper / Noto Sans Thai ทั้งหน้า (หัวข้อและเนื้อหา) / chromatic-other (forest green)
 * ทุกสีและทุกฟอนต์ในหน้าเว็บต้องอ้างตัวแปรในไฟล์นี้ — ห้ามใส่ค่าสีตรง ๆ ใน style.css หรือ app.js
 */
:root {
  color-scheme: light dark;

  /* กระดาษ (ครีมอมเขียว) → หมึก (เขียวเกือบดำ) — เทาทุกระดับเอียงไปทางสีองค์กร */
  --color-paper:    oklch(97.4% 0.011 110);
  --color-paper-2:  oklch(94.6% 0.014 118);
  --color-surface:  oklch(99.1% 0.006 110);
  --color-rule:     oklch(86.5% 0.015 140);
  --color-rule-2:   oklch(91.5% 0.012 130);
  --color-shadow:   oklch(25% 0.03 150 / 0.14); /* เงาเมนูลอย */
  --color-muted:    oklch(47% 0.022 155);
  --color-ink-2:    oklch(33% 0.03 158);
  --color-ink:      oklch(21% 0.026 160);

  /* สีองค์กร (CI) — ใช้เป็นสัญญาณ: ชื่อระบบ ปุ่มหลัก ลิงก์ เส้นทางบนแผนที่ */
  --color-brand:       oklch(41.9% 0.097 157.4);
  --color-brand-fill:  oklch(41.9% 0.097 157.4);
  --color-brand-fill-hover: oklch(36.5% 0.09 157.4);
  --color-brand-ink:   oklch(98.2% 0.01 110);
  --color-brand-soft:  oklch(93.5% 0.035 157);
  --color-focus:       oklch(52% 0.16 157);
  --color-backdrop:    oklch(21% 0.026 160 / 0.5);

  /* น้ำ (ภาพตัดขวาง "น้ำอยู่ตรงไหน") */
  --color-water:      oklch(58% 0.12 235);
  --color-water-soft: oklch(88% 0.055 228);
  --color-water-ink:  oklch(42% 0.1 240);

  /* สถานะ: จุด (dot) · พื้นอ่อน (bg) · ตัวอักษรบนพื้นอ่อน (ink) */
  --tone-ok-dot:        oklch(58% 0.13 152);
  --tone-ok-bg:         oklch(94% 0.04 152);
  --tone-ok-ink:        oklch(36% 0.085 155);
  --tone-watch-dot:     oklch(80% 0.15 86);
  --tone-watch-bg:      oklch(95.5% 0.055 92);
  --tone-watch-ink:     oklch(42% 0.09 72);
  --tone-prepare-dot:   oklch(70% 0.16 52);
  --tone-prepare-bg:    oklch(94.5% 0.045 60);
  --tone-prepare-ink:   oklch(45% 0.13 45);
  --tone-critical-dot:  oklch(58% 0.2 27);
  --tone-critical-bg:   oklch(94.5% 0.035 25);
  --tone-critical-ink:  oklch(45% 0.17 27);
  --tone-off-dot:       oklch(72% 0.012 150);
  --tone-off-bg:        oklch(94% 0.006 150);
  --tone-off-ink:       oklch(44% 0.015 150);

  /* ฟอนต์: หัวข้อ/ตัวเลข = Bai Jamjuree · เนื้อหา = Noto Sans Thai (ฟอนต์องค์กร) */
  --font-display: "Noto Sans Thai", sans-serif;
  --font-body:    "Noto Sans Thai", sans-serif;

  /* ขนาดตัวอักษร อัตราส่วน 1.25 ไม่เกิน 5 ขนาด · เล็กสุด 12.8px */
  --text-xs:   0.8rem;
  --text-base: 1rem;
  --text-md:   1.25rem;
  --text-lg:   1.5625rem;
  --text-xl:   clamp(1.95rem, 1.6rem + 1.5vw, 2.45rem);

  /* ระยะห่าง 4pt */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --page-gutter: clamp(1rem, 4vw, 2.5rem);

  --radius-card:  12px;
  --radius-input: 8px;
  --radius-pill:  999px;
  --rule-hair: 1px;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-short: 150ms;

  --z-bar: 10;
  --z-toast: 20;
}

/* โหมดมืด: กระดาษเขียวเข้ม หมึกครีม · สีองค์กรยกความสว่างขึ้นสำหรับตัวอักษร แต่ปุ่มยังเป็นสี CI */
@media (prefers-color-scheme: dark) {
  :root {
    --color-paper:    oklch(17.5% 0.016 160);
    --color-paper-2:  oklch(21.5% 0.018 160);
    --color-surface:  oklch(20% 0.017 160);
    --color-rule:     oklch(33% 0.02 160);
    --color-rule-2:   oklch(27% 0.018 160);
    --color-shadow:   oklch(0% 0 0 / 0.5);
    --color-muted:    oklch(73% 0.02 150);
    --color-ink-2:    oklch(85% 0.015 140);
    --color-ink:      oklch(95% 0.01 110);

    --color-brand:       oklch(76% 0.12 157);
    --color-brand-soft:  oklch(28% 0.05 157);
    --color-focus:       oklch(78% 0.14 157);
    --color-backdrop:    oklch(10% 0.01 160 / 0.6);
    --color-water:      oklch(72% 0.11 230);
    --color-water-soft: oklch(36% 0.07 235);
    --color-water-ink:  oklch(84% 0.08 228);

    --tone-ok-dot:        oklch(70% 0.14 152);
    --tone-ok-bg:         oklch(28% 0.05 152);
    --tone-ok-ink:        oklch(85% 0.1 152);
    --tone-watch-dot:     oklch(82% 0.15 88);
    --tone-watch-bg:      oklch(30% 0.05 85);
    --tone-watch-ink:     oklch(88% 0.11 90);
    --tone-prepare-dot:   oklch(74% 0.15 55);
    --tone-prepare-bg:    oklch(30% 0.06 52);
    --tone-prepare-ink:   oklch(85% 0.11 60);
    --tone-critical-dot:  oklch(66% 0.19 27);
    --tone-critical-bg:   oklch(30% 0.07 25);
    --tone-critical-ink:  oklch(84% 0.1 25);
    --tone-off-dot:       oklch(55% 0.012 150);
    --tone-off-bg:        oklch(25% 0.01 150);
    --tone-off-ink:       oklch(78% 0.012 150);
  }
}

/* ---- หน้าลูกค้าและหน้าพนักงาน: โทนเดียวกับเว็บบริษัท (peaceandliving.co.th) ----
 * ขาว + เขียว CI #055c37 + เขียวมินต์ #e6f0ec · หัวข้อเทา #595959 · ท้ายหน้าเขียวเข้ม · การ์ดมุมโค้งไม่เท่ากัน
 * เว็บบริษัทไม่มีโหมดมืด สองหน้านี้จึงสว่างอย่างเดียว (ประกาศค่าสว่างซ้ำทั้งชุด ทับค่าโหมดมืดของ :root) */
html:has(body.is-brand) { color-scheme: light; } /* แถบเลื่อนของหน้าก็สว่างด้วย */
body.is-brand {
  color-scheme: light;
  --color-paper:    oklch(100% 0 0);
  --color-paper-2:  oklch(95.6% 0.011 165);
  --color-surface:  oklch(100% 0 0);
  --color-rule:     oklch(90.5% 0.012 165);
  --color-rule-2:   oklch(94.5% 0.008 165);
  --color-muted:    oklch(62% 0 0);
  --color-ink-2:    oklch(46.4% 0 0);
  --color-ink:      oklch(32% 0 0);
  --color-brand:       oklch(41.9% 0.097 157.4);
  --color-brand-fill:  oklch(41.9% 0.097 157.4);
  --color-brand-fill-hover: oklch(36% 0.085 160);
  --color-brand-ink:   oklch(100% 0 0);
  --color-brand-soft:  oklch(95.6% 0.011 165);
  --color-brand-deep:  oklch(30% 0.065 163);
  --color-mint:        oklch(95.6% 0.011 165);
  --color-mint-2:      oklch(97.6% 0.02 148);
  --color-mint-line:   oklch(89.5% 0.02 170);
  --color-on-brand:    oklch(100% 0 0);
  --color-on-brand-2:  oklch(88% 0.03 160);
  --color-focus:       oklch(52% 0.16 157);
  --color-shadow:      oklch(30% 0.04 165 / 0.1);
  --color-water:      oklch(58% 0.12 235);
  --color-water-soft: oklch(88% 0.055 228);
  --color-water-ink:  oklch(42% 0.1 240);
  --tone-ok-dot:        oklch(58% 0.13 152);
  --tone-ok-bg:         oklch(94% 0.04 152);
  --tone-ok-ink:        oklch(36% 0.085 155);
  --tone-watch-dot:     oklch(80% 0.15 86);
  --tone-watch-bg:      oklch(95.5% 0.055 92);
  --tone-watch-ink:     oklch(42% 0.09 72);
  --tone-prepare-dot:   oklch(70% 0.16 52);
  --tone-prepare-bg:    oklch(94.5% 0.045 60);
  --tone-prepare-ink:   oklch(45% 0.13 45);
  --tone-critical-dot:  oklch(58% 0.2 27);
  --tone-critical-bg:   oklch(94.5% 0.035 25);
  --tone-critical-ink:  oklch(45% 0.17 27);
  --tone-off-dot:       oklch(72% 0.012 150);
  --tone-off-bg:        oklch(94% 0.006 150);
  --tone-off-ink:       oklch(44% 0.015 150);
  /* มุมการ์ดแบบเว็บบริษัท: มุมเล็ก + มุมโค้งใหญ่ทแยงกัน */
  --radius-sm: 4px;
  --radius-curve: 40px;
}

/* ---- หน้าเข้าสู่ระบบของพนักงาน: แบบเดียวกับระบบอื่นของบริษัท (PEACE PMS) ---- */
body.is-login {
  --login-from:  oklch(38% 0.075 160);
  --login-mid:   oklch(31% 0.07 160);
  --login-to:    oklch(23% 0.05 162);
  --login-glow:  oklch(52% 0.08 155 / 0.32);
  --login-bg:    oklch(98.4% 0.002 250);
  --login-box:   oklch(96.5% 0.003 250);
  --login-title: oklch(36% 0.085 158);
  /* โลโก้ Microsoft บนปุ่มเข้าสู่ระบบ (สีตามแนวทางของ Microsoft) */
  --color-ms-red:    #f25022;
  --color-ms-green:  #7fba00;
  --color-ms-blue:   #00a4ef;
  --color-ms-yellow: #ffb900;
}