/* ==========================================================================
   Kroo8 — Design Tokens
   --------------------------------------------------------------------------
   ปรัชญาการออกแบบ: "เป็นมิตร · เรียบง่าย"
     · พื้นหลังอุ่นสว่าง เว้นที่ว่างเยอะ  · มุมโค้งนุ่ม  · เงาบางเบา
     · สีเดียวเป็นหลัก (ink) + สีประจำหมวดเป็น accent เท่านั้น
     · ตัวอักษรไทยอ่านสบาย line-height 1.7

   สีทั้งชุดผ่านการตรวจด้วย dataviz validator แล้ว:
     · สีประจำ 5 หมวด (accent)  → PASS ทุกเกณฑ์ (adjacent pairlist) ทั้ง light/dark
       light: #E0703C,#BD4A93,#3E8FD8,#22A06B,#6B54C4
       dark : #D2652F,#B04289,#3B82CE,#1E9264,#7059C6
     · สีชุดกราฟ (series blue+orange) → PASS ทุกเกณฑ์ทั้ง light/dark
     · สีสถานะ (good/warning/critical) → ใช้คู่กับไอคอน+ข้อความเสมอ ไม่ใช้สีลำพัง
   ========================================================================== */

:root {
  /* ---------- radius ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---------- spacing scale (4px base) ---------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-7: 32px;  --s-8: 40px;
  --s-9: 56px;  --s-10: 72px; --s-11: 96px;

  /* ---------- type ---------- */
  --font-ui: "Sarabun", "IBM Plex Thai", "Noto Sans Thai", "Leelawadee UI",
             "Tahoma", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-book: "Sarabun", "IBM Plex Thai", "Noto Sans Thai", "Leelawadee UI",
               "Tahoma", Georgia, serif;
  --font-mono: "Cascadia Mono", "JetBrains Mono", Consolas, "Courier New", monospace;

  --fs-xs: 12px;  --fs-sm: 13.5px; --fs-base: 15.5px; --fs-md: 17px;
  --fs-lg: 20px;  --fs-xl: 24px;   --fs-2xl: 30px;    --fs-3xl: 38px;
  --fs-4xl: 48px; --fs-hero: 58px;

  --lh-tight: 1.28;
  --lh-snug: 1.45;
  --lh-body: 1.72;

  /* ---------- motion ---------- */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 340ms;

  /* ---------- layout ---------- */
  --wrap: 1160px;
  --wrap-narrow: 760px;
  --wrap-wide: 1360px;
  --topbar-h: 62px;

  /* ---------- fixed status palette (never themed) ---------- */
  --st-good: #0ca30c;
  --st-warn: #fab219;
  --st-serious: #ec835a;
  --st-crit: #d03b3b;
}

/* ==========================================================================
   LIGHT THEME (default)
   ========================================================================== */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* surfaces — อุ่นเล็กน้อยให้ดูเป็นมิตร ไม่ใช่ขาวจ้า */
  --page:      #F7F8FB;
  --page-warm: #FBF8F4;
  --surface:   #FFFFFF;
  --surface-2: #F2F4F8;
  --surface-3: #E8EBF2;
  --overlay:   rgba(20, 23, 30, .42);

  /* ink */
  --text:      #1B1E26;
  --text-2:    #545B6C;
  --text-3:    #7C8496;
  --text-inv:  #FFFFFF;

  /* lines */
  --line:      #E4E7EE;
  --line-2:    #D3D8E3;
  --hairline:  rgba(27, 30, 38, .10);

  /* primary action = ink (เรียบง่ายที่สุด, contrast สูงสุด) */
  --btn-primary-bg:     #1D2129;
  --btn-primary-bg-h:   #2B313D;
  --btn-primary-fg:     #FFFFFF;

  /* interactive accent (ลิงก์ / focus ring) */
  --link:      #1C5CAB;
  --link-h:    #164A8B;
  --focus:     #2a78d6;

  /* chart roles */
  --chart-surface: #FFFFFF;
  --series-1:  #2a78d6;
  --series-2:  #eb6834;
  --grid:      #E4E7EE;
  --axis:      #C8CDD9;
  --seq-100:   #cde2fb;
  --seq-250:   #86b6ef;
  --seq-400:   #3987e5;
  --seq-500:   #256abf;
  --seq-600:   #184f95;

  /* shadows — บางเบา */
  --sh-1: 0 1px 2px rgba(20, 23, 30, .05), 0 1px 1px rgba(20, 23, 30, .04);
  --sh-2: 0 2px 8px rgba(20, 23, 30, .07), 0 1px 2px rgba(20, 23, 30, .05);
  --sh-3: 0 8px 26px rgba(20, 23, 30, .10), 0 2px 6px rgba(20, 23, 30, .05);
  --sh-4: 0 20px 56px rgba(20, 23, 30, .16), 0 4px 12px rgba(20, 23, 30, .07);

  /* ---- category accents (light) ---- */
  --cat-food:      #E0703C;  --cat-food-ink:      #9A4413;  --cat-food-soft:      #FDF1EA;
  --cat-clothing:  #BD4A93;  --cat-clothing-ink:  #8C2F6C;  --cat-clothing-soft:  #FCECF6;
  --cat-home:      #3E8FD8;  --cat-home-ink:      #1E5FA8;  --cat-home-soft:      #EBF3FD;
  --cat-health:    #22A06B;  --cat-health-ink:    #16714A;  --cat-health-soft:    #E8F7F0;
  --cat-modern:    #6B54C4;  --cat-modern-ink:    #4B3799;  --cat-modern-soft:    #F1EDFC;

  --brand-wash: linear-gradient(120deg, #FDF1EA 0%, #FCECF6 34%, #EBF3FD 68%, #F1EDFC 100%);
}

/* ==========================================================================
   DARK THEME
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;

  --page:      #12141A;
  --page-warm: #14161C;
  --surface:   #1C1F27;
  --surface-2: #232733;
  --surface-3: #2C313F;
  --overlay:   rgba(4, 5, 8, .62);

  --text:      #EDEFF5;
  --text-2:    #A8AFC0;
  --text-3:    #7C8496;
  --text-inv:  #12141A;

  --line:      #2E333F;
  --line-2:    #3A4152;
  --hairline:  rgba(255, 255, 255, .10);

  --btn-primary-bg:     #EDEFF5;
  --btn-primary-bg-h:   #FFFFFF;
  --btn-primary-fg:     #14161C;

  --link:      #7FB2F2;
  --link-h:    #A3C8F7;
  --focus:     #5598e7;

  --chart-surface: #1C1F27;
  --series-1:  #3987e5;
  --series-2:  #d95926;
  --grid:      #2A2F3B;
  --axis:      #3A4152;
  --seq-100:   #104281;
  --seq-250:   #184f95;
  --seq-400:   #2a78d6;
  --seq-500:   #3987e5;
  --seq-600:   #5598e7;

  --sh-1: 0 1px 2px rgba(0, 0, 0, .40);
  --sh-2: 0 2px 10px rgba(0, 0, 0, .45);
  --sh-3: 0 10px 30px rgba(0, 0, 0, .50);
  --sh-4: 0 22px 60px rgba(0, 0, 0, .62);

  --cat-food:      #D2652F;  --cat-food-ink:      #F2A278;  --cat-food-soft:      #2B2119;
  --cat-clothing:  #B04289;  --cat-clothing-ink:  #E793C7;  --cat-clothing-soft:  #2A1A25;
  --cat-home:      #3B82CE;  --cat-home-ink:      #92C1F2;  --cat-home-soft:      #16202D;
  --cat-health:    #1E9264;  --cat-health-ink:    #6ED0A6;  --cat-health-soft:    #142522;
  --cat-modern:    #7059C6;  --cat-modern-ink:    #B7A6F0;  --cat-modern-soft:    #1E1B2E;

  --brand-wash: linear-gradient(120deg, #221A16 0%, #241723 34%, #14202E 68%, #1B1830 100%);
}

/* ---- ตามระบบปฏิบัติการ (data-theme="auto" ถูกแปลงเป็น light/dark โดย JS
        แต่เผื่อกรณี JS ยังไม่ทำงาน ให้ media query ช่วยไว้) ---- */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page: #12141A;  --page-warm: #14161C;  --surface: #1C1F27;
    --surface-2: #232733; --surface-3: #2C313F;
    --text: #EDEFF5; --text-2: #A8AFC0; --text-3: #7C8496; --text-inv: #12141A;
    --line: #2E333F; --line-2: #3A4152; --hairline: rgba(255,255,255,.10);
    --btn-primary-bg: #EDEFF5; --btn-primary-bg-h: #FFFFFF; --btn-primary-fg: #14161C;
    --link: #7FB2F2; --link-h: #A3C8F7; --focus: #5598e7;
    --chart-surface: #1C1F27; --series-1: #3987e5; --series-2: #d95926;
    --grid: #2A2F3B; --axis: #3A4152;
    --cat-food: #D2652F; --cat-food-ink: #F2A278; --cat-food-soft: #2B2119;
    --cat-clothing: #B04289; --cat-clothing-ink: #E793C7; --cat-clothing-soft: #2A1A25;
    --cat-home: #3B82CE; --cat-home-ink: #92C1F2; --cat-home-soft: #16202D;
    --cat-health: #1E9264; --cat-health-ink: #6ED0A6; --cat-health-soft: #142522;
    --cat-modern: #7059C6; --cat-modern-ink: #B7A6F0; --cat-modern-soft: #1E1B2E;
    --brand-wash: linear-gradient(120deg,#221A16 0%,#241723 34%,#14202E 68%,#1B1830 100%);
  }
}

/* ==========================================================================
   ตัวแปร accent ต่อหมวด — ใช้ class .cat-<key> ครอบ แล้วอ้าง var(--accent*)
   สีหมวดใช้เป็น "accent เสริม" เท่านั้น ทุกจุดมีอิโมจิ + ชื่อหมวดกำกับ
   จึงไม่มีที่ใดที่สื่อความหมายด้วยสีลำพัง
   ========================================================================== */
.cat-food     { --accent: var(--cat-food);     --accent-ink: var(--cat-food-ink);     --accent-soft: var(--cat-food-soft); }
.cat-clothing { --accent: var(--cat-clothing); --accent-ink: var(--cat-clothing-ink); --accent-soft: var(--cat-clothing-soft); }
.cat-home     { --accent: var(--cat-home);     --accent-ink: var(--cat-home-ink);     --accent-soft: var(--cat-home-soft); }
.cat-health   { --accent: var(--cat-health);   --accent-ink: var(--cat-health-ink);   --accent-soft: var(--cat-health-soft); }
.cat-modern   { --accent: var(--cat-modern);   --accent-ink: var(--cat-modern-ink);   --accent-soft: var(--cat-modern-soft); }

:root { --accent: var(--cat-home); --accent-ink: var(--cat-home-ink); --accent-soft: var(--cat-home-soft); }

/* ==========================================================================
   font scale (ปรับได้ในหน้าเรียน / ตั้งค่า)
   ========================================================================== */
:root[data-fs="s"]  { --reader-fs: 15px; }
:root                { --reader-fs: 16.5px; }
:root[data-fs="m"]  { --reader-fs: 16.5px; }
:root[data-fs="l"]  { --reader-fs: 18.5px; }
:root[data-fs="xl"] { --reader-fs: 20.5px; }