/*
 * โทเคนทั้งหมดของ Jeep.Pocket
 *
 * นี่คือไฟล์เดียวในระบบที่มีค่าสีดิบได้ ไฟล์อื่นใช้ var(--…) เท่านั้น
 * ระบบเดิมกระจายสีไว้ในโค้ด JavaScript ทำให้เปลี่ยนธีมแล้วตารางรายงานยังสว่างค้างอยู่
 */

:root {
  /* ระยะห่าง — ฐาน 4px ห้ามใช้ค่านอกสเกลนี้ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ขนาดตัวอักษร */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 20px;
  --text-xl: 26px;
  --text-2xl: 34px;
  --text-3xl: 44px;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --leading-tight: 1.25;
  --leading-normal: 1.55;

  /* ตัวอักษร */
  --font-ui: 'Anuphan', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-num: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* รูปทรง */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ความเคลื่อนไหว */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur: 180ms;

  /* ความหนาแน่น — สลับได้ที่ตั้งค่า */
  --row-pad-y: var(--space-3);
}

:root[data-density='compact'] {
  --row-pad-y: var(--space-2);
}

/* ---------------------------------------------------------------
 * ธีม Lavender — ค่าเริ่มต้น
 * พื้นผิวเป็นพาสเทล ตัวอักษรเข้มพอที่จะอ่านสบาย
 * --------------------------------------------------------------- */
:root,
:root[data-theme='lavender'] {
  --surface-0: #FBFAFD;
  --surface-1: #FFFFFF;
  --surface-2: #F5F3FA;
  --surface-3: #EDEAF5;
  --border: #E7E3F0;
  --border-strong: #C9C1DE;

  --text-1: #1C1A24;
  --text-2: #5A5468;
  --text-3: #8B85A0;

  --accent: #6D4FD0;
  --accent-hover: #5C3FBC;
  --accent-soft: #EEE9FB;
  --accent-contrast: #FFFFFF;

  --positive: #1F7A55;
  --positive-soft: #E4F3EC;
  --negative: #B23A50;
  --negative-soft: #FBEAEE;
  --warning: #96600A;
  --warning-soft: #FCF3E3;
  --info: #1F5EA8;
  --info-soft: #E9F1FA;

  --shadow-1: 0 1px 2px rgba(28, 26, 36, .05), 0 4px 12px rgba(28, 26, 36, .04);
  --shadow-2: 0 8px 32px rgba(28, 26, 36, .14);
}

:root[data-theme='rose'] {
  --surface-0: #FDFAFB;
  --surface-1: #FFFFFF;
  --surface-2: #FAF2F4;
  --surface-3: #F4E7EB;
  --border: #F0E2E6;
  --border-strong: #DFBFC8;

  --text-1: #241A1D;
  --text-2: #665059;
  --text-3: #9C8189;

  --accent: #B03A62;
  --accent-hover: #952F52;
  --accent-soft: #FBE9EF;
  --accent-contrast: #FFFFFF;

  --positive: #1F7A55;
  --positive-soft: #E4F3EC;
  --negative: #A63A3A;
  --negative-soft: #FBEBEB;
  --warning: #96600A;
  --warning-soft: #FCF3E3;
  --info: #1F5EA8;
  --info-soft: #E9F1FA;

  --shadow-1: 0 1px 2px rgba(36, 26, 29, .05), 0 4px 12px rgba(36, 26, 29, .04);
  --shadow-2: 0 8px 32px rgba(36, 26, 29, .14);
}

:root[data-theme='mint'] {
  --surface-0: #F9FCFB;
  --surface-1: #FFFFFF;
  --surface-2: #EFF7F4;
  --surface-3: #E2F0EB;
  --border: #DFEDE8;
  --border-strong: #B4D3C9;

  --text-1: #16221E;
  --text-2: #4C605A;
  --text-3: #7D938C;

  --accent: #14705A;
  --accent-hover: #0F5B49;
  --accent-soft: #E2F2ED;
  --accent-contrast: #FFFFFF;

  --positive: #1F7A55;
  --positive-soft: #E4F3EC;
  --negative: #B23A50;
  --negative-soft: #FBEAEE;
  --warning: #96600A;
  --warning-soft: #FCF3E3;
  --info: #1F5EA8;
  --info-soft: #E9F1FA;

  --shadow-1: 0 1px 2px rgba(22, 34, 30, .05), 0 4px 12px rgba(22, 34, 30, .04);
  --shadow-2: 0 8px 32px rgba(22, 34, 30, .14);
}

:root[data-theme='sky'] {
  --surface-0: #F9FBFD;
  --surface-1: #FFFFFF;
  --surface-2: #EFF4FA;
  --surface-3: #E2ECF6;
  --border: #DFE9F3;
  --border-strong: #B5CBE0;

  --text-1: #171E26;
  --text-2: #4C5A68;
  --text-3: #7D8C9C;

  --accent: #1B5FA8;
  --accent-hover: #154D8B;
  --accent-soft: #E7F0F9;
  --accent-contrast: #FFFFFF;

  --positive: #1F7A55;
  --positive-soft: #E4F3EC;
  --negative: #B23A50;
  --negative-soft: #FBEAEE;
  --warning: #96600A;
  --warning-soft: #FCF3E3;
  --info: #1B5FA8;
  --info-soft: #E7F0F9;

  --shadow-1: 0 1px 2px rgba(23, 30, 38, .05), 0 4px 12px rgba(23, 30, 38, .04);
  --shadow-2: 0 8px 32px rgba(23, 30, 38, .14);
}

:root[data-theme='peach'] {
  --surface-0: #FDFBF9;
  --surface-1: #FFFFFF;
  --surface-2: #FAF3EE;
  --surface-3: #F5E8DF;
  --border: #F1E4DA;
  --border-strong: #DEC3AE;

  --text-1: #241D18;
  --text-2: #665A50;
  --text-3: #9C8B7D;

  --accent: #A8532A;
  --accent-hover: #8C4321;
  --accent-soft: #FAEBE1;
  --accent-contrast: #FFFFFF;

  --positive: #1F7A55;
  --positive-soft: #E4F3EC;
  --negative: #B23A50;
  --negative-soft: #FBEAEE;
  --warning: #8A5A0A;
  --warning-soft: #FBF1E0;
  --info: #1F5EA8;
  --info-soft: #E9F1FA;

  --shadow-1: 0 1px 2px rgba(36, 29, 24, .05), 0 4px 12px rgba(36, 29, 24, .04);
  --shadow-2: 0 8px 32px rgba(36, 29, 24, .14);
}

/* ---------------------------------------------------------------
 * ธีม Night — โหมดมืด
 * พาสเทลกลับด้าน: พื้นเข้มอมม่วง ตัวอักษรสว่าง สีเน้นสว่างขึ้นเพื่อให้ contrast ผ่าน
 * --------------------------------------------------------------- */
:root[data-theme='night'] {
  --surface-0: #14131A;
  --surface-1: #1C1A24;
  --surface-2: #232130;
  --surface-3: #2C2A3A;
  --border: #302E3E;
  --border-strong: #4A4660;

  --text-1: #F2F0F7;
  --text-2: #B4AEC6;
  --text-3: #837C99;

  --accent: #B4A0F5;
  --accent-hover: #C6B6F8;
  --accent-soft: #2A2540;
  --accent-contrast: #1C1A24;

  --positive: #6BD3A4;
  --positive-soft: #17322A;
  --negative: #F58B9E;
  --negative-soft: #3A222A;
  --warning: #E8B769;
  --warning-soft: #362C1B;
  --info: #85B8F0;
  --info-soft: #1D2B3C;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .3);
  --shadow-2: 0 8px 32px rgba(0, 0, 0, .55);
}

/* ตามการตั้งค่าของเครื่องเมื่อผู้ใช้ยังไม่ได้เลือกธีมเอง */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --surface-0: #14131A;
    --surface-1: #1C1A24;
    --surface-2: #232130;
    --surface-3: #2C2A3A;
    --border: #302E3E;
    --border-strong: #4A4660;
    --text-1: #F2F0F7;
    --text-2: #B4AEC6;
    --text-3: #837C99;
    --accent: #B4A0F5;
    --accent-hover: #C6B6F8;
    --accent-soft: #2A2540;
    --accent-contrast: #1C1A24;
    --positive: #6BD3A4;
    --positive-soft: #17322A;
    --negative: #F58B9E;
    --negative-soft: #3A222A;
    --warning: #E8B769;
    --warning-soft: #362C1B;
    --info: #85B8F0;
    --info-soft: #1D2B3C;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .3);
    --shadow-2: 0 8px 32px rgba(0, 0, 0, .55);
  }
}