/* ============================================================================
   SaveCost · ชั้นโทเคน — แหล่งความจริงเดียวของทั้งระบบ

   ก่อนมีไฟล์นี้ styles.css กับ landing.css ต่างคนต่างมี :root ของตัวเอง แล้วมัน
   ก็เลื่อนออกจากกันเงียบ ๆ · ตอนที่แอปแก้ --ink-3 จาก #97a193 เป็น #626e5e
   เพราะวัดได้ 2.54:1 ซึ่งตกมาตรฐาน AA หน้า landing ไม่ได้รับการแก้นั้นไปด้วย
   และยังใช้ค่าที่อ่านไม่ออกมาตลอด · ค่าซ้ำสองที่คือค่าที่จะต่างกันวันหนึ่ง

   ทุกไฟล์ CSS ของโปรเจกต์ให้โหลดไฟล์นี้ก่อน แล้วอ้างผ่าน var() เท่านั้น
   ============================================================================ */

:root {
  /* ---------- ผิวที่เบราว์เซอร์วาดเอง ----------
     ส่วนที่เราไม่ได้วาดก็ยังเป็นหน้าตาของแอปอยู่ดี · แถบเลื่อน ขีดพิมพ์
     แถบเลือกข้อความ และช่องติ๊ก มาพร้อมค่าเริ่มต้นของเบราว์เซอร์ซึ่งไม่ได้เป็น
     ของชุดสีไหนเลย · พวกนี้คือสัญญาณที่ถูกที่สุดว่าหน้านี้ถูก "ทำ" ไม่ใช่
     "ประกอบ" และเป็นสิ่งที่ถูกข้ามบ่อยที่สุด

     color-scheme ไม่ใช่เรื่องความสวยอย่างเดียว · ถ้าไม่บอก เบราว์เซอร์จะวาด
     แถบเลื่อน รายการใน <select> ตัวเลือกวันที่ และช่องกรอกเป็นชุดสว่างเสมอ
     แม้แอปจะอยู่ในโหมดมืด — เป็นแผ่นขาวโผล่กลางจอมืดทุกครั้งที่กดเลือกเดือน */
  color-scheme: light;
  accent-color: var(--forest-ink);

  /* ---------- พื้นและผิว ---------- */
  --bg: #f7faf3;
  --auth-bg: #e4ebd8;
  --surface: #ffffff;
  --surface-2: #f0f4ea;
  --card: #ffffff;

  /* ---------- แบรนด์ ---------- */
  --forest: #104828;
  --forest-mid: #1c6b3c;
  --forest-deep: #0b3319;
  --forest-soft: #e9f5d8;
  /* --forest เป็นสีพื้นที่มีตัวหนังสือขาวทับ ส่วน --forest-ink เป็นสีตัวหนังสือ
     บนแผ่นสีอ่อน · บนพื้นสว่างสองอันนี้เป็นสีเดียวกัน แต่พอเป็นพื้นมืดมันต้อง
     แยกทางกัน จึงต้องมีสองชื่อ ไม่ใช่ชื่อเดียวทำสองหน้าที่ */
  --forest-ink: #104828;
  --leaf: #d8e8a0;
  --leaf-bright: #a8e063;
  --leaf-deep: #6f9134;
  --brand: #104828;
  --gold: #7f9a3c;

  /* ---------- ตัวหนังสือ ----------
     สามระดับ และทั้งสามต้องอ่านออก · #97a193 ของเดิมวัดได้ 2.68:1 บนขาว
     ต่ำกว่า AA ทุกที่ที่ใช้ · การแก้เฉพาะระดับสามจะทำให้ระยะห่างจากระดับสอง
     เหลือ 1.06:1 ซึ่งไม่ใช่ระยะห่าง ลำดับชั้นจะยุบจากสามเหลือสอง จึงขยับทั้งคู่
     ได้ 8.67 กับ 5.37 บนขาว และมีขั้น 1.62:1 ที่ตายังอ่านออกว่าเป็นคนละระดับ */
  --ink: #11170f;
  --ink-2: #454e42;
  --ink-3: #626e5e;
  --rule: #e3e7dd;
  --rule-soft: #edf0e8;

  /* ---------- สถานะ ---------- */
  --good: #1c6b3c;
  --bad: #c0392b;
  /* --good/--bad เข้มพอจะเป็นตัวหนังสือ แต่พอเจือจางเป็นพื้นแล้วขุ่น
     สีสำหรับระบายปฏิทินจึงมีคู่ของตัวเองที่สว่างกว่า */
  --cal-up: hsl(146 52% 46%);
  --cal-down: hsl(6 76% 62%);
  --good-bg: #e7eee0;
  --bad-bg: #fbeae8;
  --warn: #6d7a33;
  --warn-bg: #f2f6e3;
  /* เงินเกินลิ้นชักไม่ใช่เงินขาด · แดงคือเงินหาย เหลืองอำพันคือเงินเกิน
     เป็นคู่สถานะ จึงอยู่กับที่แม้ชุดสีแบรนด์จะเปลี่ยนตามร้าน

     เคยลองย้ายไปส้มและฟ้าแล้วทั้งคู่ · เจ้าของร้านเลือกอำพันของเดิม
     อำพันจึงเป็นของ "เงินเกิน" ไม่ใช่ของ --warn ซึ่งเป็นเหตุผลที่ --warn
     กลับมาเป็นเขียวมะกอกด้วย · กล่องลิงก์พนักงานที่เคยอ่านว่าหลุดธีม
     แก้ที่ตัวมันเองด้วยสีแบรนด์ ไม่ใช่ที่โทเคนกลาง */
  --over: #a86a1f;
  --over-bg: #fbf1e0;

  /* ---------- โทนประจำหน้า ----------
     หน้ารายรับ รายจ่าย และเงินสด หน้าตาเหมือนกันทุกกระเบียด ต่างกันแค่ตัวหนังสือ
     คนที่เปิดสลับไปมาทั้งวันต้องอ่านหัวข้อก่อนถึงจะรู้ว่าอยู่หน้าไหน
     สีทำงานนี้ได้เร็วกว่าตัวหนังสือ · เขียวคือเงินเข้า แดงคือเงินออก
     เหลืองอำพันคือเงินในลิ้นชักซึ่งไม่ใช่ทั้งเข้าและออก แต่เป็นของที่ต้องนับ

     ทั้งสองชุดสร้างด้วยโครงเดียวกับสีแบรนด์ (--forest / -mid / -deep / -soft)
     ต่างกันแค่ hue จึงมีน้ำหนักเท่ากันและอยู่ร่วมหน้าเดียวกันได้
     ไม่ใช่แดงกับเหลืองสำเร็จรูปที่ดังกว่าทุกอย่างรอบตัว

     ค่าตายตัว ไม่ผูกกับ hue ของร้าน · ร้านที่เลือกธีมแดงจะได้รายจ่ายสีเดียว
     กับรายรับ ซึ่งลบความต่างที่สีชุดนี้มีไว้เพื่อบอกพอดี */
  /* hue 6 ที่ความสว่าง 26% อ่านเป็นน้ำตาลอิฐมากกว่าแดง · ขยับมาที่ 358 แล้ว
     ยกความสว่างขึ้นเป็น 36% ได้แดงชาดที่ยังเข้มพอให้ตัวหนังสือขาวทับได้ */
  --spend: hsl(358 64% 36%);
  --spend-mid: hsl(358 60% 46%);
  --spend-deep: hsl(358 68% 22%);
  --spend-soft: hsl(356 62% 95%);
  --spend-glow: hsl(358 76% 63%);
  /* ตัวหนังสือบนแผ่นสีอ่อนของโทนนั้น ๆ · แยกจาก --spend เพราะตัวนั้นเป็นสีพื้น
     ที่มีตัวหนังสือขาวทับ ส่วนตัวนี้เป็นตัวหนังสือเอง เหตุผลเดียวกับ --forest-ink */
  --spend-ink: hsl(358 66% 35%);

  --till: hsl(33 62% 26%);
  --till-mid: hsl(33 58% 36%);
  --till-deep: hsl(33 66% 15%);
  --till-soft: hsl(36 62% 92%);
  --till-glow: hsl(38 86% 60%);
  --till-ink: hsl(33 66% 27%);

  /* ---------- ตัวอักษร ----------
     ของเดิมมี font-size ที่ต่างกัน 68 ค่าในสี่ไฟล์ และ 13 ค่าในนั้น
     (.74 ถึง .95rem) ทำงานเดียวกันหมด · สเกลนี้ยุบสิบสามค่าให้เหลือสี่
     โดยแต่ละค่าใหม่ห่างจากของเดิมไม่ถึงหนึ่งพิกเซล ย้ายทีละหน้าจอได้
     โดยหน้าตาไม่กระโดด */
  --font: 'IBM Plex Sans Thai', system-ui, -apple-system, sans-serif;

  /* สองขั้นนี้เพิ่มเข้ามาตอนยุบ font-size ในแอปเข้าสเกล · ของเดิมมีตัวหนังสือ
     ขนาด 9-10.5px อยู่ 32 จุด (ตัวเลขในช่องปฏิทิน ป้ายกำกับในชิป) ซึ่งต่ำกว่า
     ขั้นล่างสุดของสเกล และมีขนาด 20-22px อยู่ 24 จุดซึ่งตกอยู่กลางช่องว่าง
     ระหว่าง 18.4 กับ 24 · ถ้าไม่มีสองขั้นนี้ การยุบจะต้องขยับของพวกนั้น
     เกินหนึ่งพิกเซล ซึ่งเป็นการเปลี่ยนหน้าตา ไม่ใช่การจัดระเบียบ */
  --t-3xs: .63rem;    /* 10.1px · ตัวเลขในตาราง ป้ายในชิป */
  --t-2xs: .72rem;    /* 11.5px · ตัวเลขกำกับเล็กสุด ใช้เท่าที่จำเป็น */
  --t-xs: .78rem;     /* 12.5px · คำใบ้ หมายเหตุ         แทน .74 .76 .78 */
  --t-sm: .84rem;     /* 13.4px · ป้ายกำกับ หัวตาราง      แทน .8 .82 .84 .85 */
  --t-md: .92rem;     /* 14.7px · เนื้อความในแอป          แทน .86–.92 */
  --t-base: 1rem;     /* 16px   · เนื้อความหน้าเว็บ        แทน .95–1.05 */
  --t-lg: 1.15rem;    /* 18.4px · หัวข้อย่อย */
  --t-2lg: 1.3rem;    /* 20.8px · หัวข้อหน้า ตัวเลขรอง */
  --t-xl: 1.5rem;     /* 24px   · หัวข้อการ์ด ตัวเลขเด่น */
  --t-2xl: 2rem;      /* 32px   · หัวข้อ section */
  --t-3xl: 2.75rem;   /* 44px   · หัวข้อใหญ่ */
  --t-hero: clamp(2.25rem, 6vw, 3.25rem);

  /* 1.25 เป็นค่ามาตรฐานของหัวข้อภาษาอังกฤษ ซึ่งใช้กับภาษาไทยไม่ได้
     วัดหมึกจริงของ IBM Plex Sans Thai ด้วย canvas actualBoundingBox:
       ละติน "Hgjpq"                       0.96 em
       ไทยซ้อนหนัก "ญุ้"                    1.27 em
       หัวข้อจริง h1 "ทุกวัน ไม่ต้องรอ…"    1.42 em
       หัวข้อจริง h2 "เริ่มบันทึกวันนี้ …"  1.46 em
     ระยะบรรทัดต้องไม่น้อยกว่าความสูงหมึก ไม่งั้นวรรณยุกต์บรรทัดล่างชนสระ
     บรรทัดบน · 1.5 คลุมกรณีแย่สุดที่วัดได้พอดีและเหลือที่หายใจนิดหน่อย */
  --lh-tight: 1.5;    /* หัวข้อ */
  --lh-snug: 1.45;
  --lh-ui: 1.55;      /* จังหวะที่หน้าจอในแอปใช้จริง — แน่นกว่าหน้าเว็บเพราะ
                         หน้าจอเดียวต้องใส่ข้อมูลได้มากกว่า */
  --lh-body: 1.65;    /* เนื้อความยาว ๆ */
  --lh-loose: 1.75;   /* เนื้อความหน้าเว็บ · ภาษาไทยมีสระบนล่าง ต้องการที่หายใจ
                         มากกว่าอังกฤษที่ระยะเดียวกัน */

  --w-normal: 400;
  --w-medium: 500;
  --w-semi: 600;
  --w-bold: 700;

  /* ---------- ระยะ · ฐาน 4px ----------
     ของเดิมมี padding ที่ต่างกัน 170 แบบ ซึ่งแปลว่าไม่มีจังหวะอะไรเลย */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ---------- มุมโค้ง ---------- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r: 18px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* ---------- เงา ---------- */
  --shadow-sm: 0 1px 2px rgba(17, 23, 15, .04);
  --shadow: 0 4px 16px rgba(17, 23, 15, .05);
  --shadow-lg: 0 16px 44px rgba(17, 23, 15, .16);
  --shadow-float: 0 2px 4px rgba(17, 23, 15, .04), 0 18px 40px -16px rgba(17, 23, 15, .22);

  /* ---------- โครงหน้า ---------- */
  --container: 1200px;
  --container-narrow: 760px;
  --nav-h: 74px;
  --sec-y: clamp(56px, 9vw, 104px);   /* ระยะบน-ล่างของแต่ละ section */

  /* ---------- การเคลื่อนไหว ---------- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 420ms;
}

/* คนที่ตั้งเครื่องให้ลดการเคลื่อนไหวมักตั้งเพราะเวียนหัวจริง ๆ ไม่ใช่เพราะชอบ
   นิ่ง ๆ · ปิดที่ชั้นโทเคนทีเดียว ทุก component ที่อ้าง var() ก็หยุดตาม */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
  }
}