/* ============================================================
   DECDESIGN · Design Tokens — แหล่งความจริงเดียวของสี/ขนาด/ระยะทั้งเว็บ
   ------------------------------------------------------------
   ไฟล์นี้ถูกเรียกจาก 2 ที่:
     1) index.html          (ตัวแอป — สวน/เมล็ด/ดอกไม้)
     2) assets/unic/css/decdesign.css  (หน้า login / สมัคร / 2FA / หลังบ้าน)
   แก้สีที่นี่ที่เดียว = เปลี่ยนทั้งเว็บพร้อมกัน
   ย้ายออกมาจาก index.html เมื่อ 15 ก.ย. 2026 (ขั้นที่ 2 ของแผนยกเครื่อง)
   ============================================================ */

:root{
    /* ===== DECDESIGN · Design Tokens (แหล่งความจริงเดียวของทีมสี/ขนาด) ===== */

    /* — พื้นหลัง & พื้นผิว (ไล่จากลึกสุด → ลอยสุด) — */
    --bg:#050308;              /* พื้นหลังแอป (ลึกสุด) */
    --surface-1:#0A0810;       /* ช่อง/กรอบจม เช่น ช่องกรอก พื้นรูป */
    --surface-2:#0F0D14;       /* พื้นทึบบนพื้นหลัง */
    --surface-3:#17141F;       /* การ์ด/ปุ่ม/แผ่นลอย */
    --card:var(--surface-3);   /* alias ที่ component เดิมเรียกใช้ */
    --surface-4:#1D1927;       /* ลอยสุด เช่น แสงวิ่งโครงกระดูก */
    --overlay:rgba(0,0,0,0.6); /* ฉากหลัง modal */

    /* — เส้น & ขอบ — */
    --border:#2A2536;          /* ขอบมาตรฐาน */
    --line:#2A2536;            /* เส้นคั่น (ค่าเดียวกับ border) */
    --border-strong:#4A4558;   /* ขอบเน้น เช่น ปุ่ม ✕ ประจำช่อง */

    /* — ตัวอักษร — */
    --text:#EDEAF6;            /* ข้อความหลัก */
    --dim:#9C96B4;             /* ข้อความรอง */
    --text-muted:#B5AFC8;      /* ข้อความบนพื้นเข้ม เช่นใน ✕ */
    --on-green:#05230F;        /* ตัวอักษรบนพื้นเขียว */
    --on-accent:#0F0D14;       /* ตัวอักษรบนพื้นสีสด (ป้ายนับ) */

    /* — สีสื่อความหมาย — */
    --green:#5EE58A;           /* สีหลัก: สิ่งมีชีวิต/สำเร็จ/เลือกแล้ว */
    --green-dim:rgba(94,229,138,0.16);
    --danger:#FF5A6E;          /* อันตราย: การลบเท่านั้น */
    --violet:#7C5CFF;          /* เส้นทาง/กิ่ง */
    --pink:#FF9EC7;            /* ดอกไม้/ฟินาเล่ */
    --pink2:#C792EA;           /* ป้ายนับรอง */
    --amber2:#FFC069;          /* เหรียญ/มูลค่า */
    --blue:#6FB3FF;            /* เสียง/ข้อมูล */
    --chip-a:#3A3646;          /* พื้นปุ่มเล็กบนการ์ด */

    /* — มุมโค้ง (radius) — */
    --r-2xs:2px; --r-xs:6px; --r-s2:9px; --r-s3:12px; --r-sm:10px; --r-md:14px; --r-lg:16px; --r-xl:22px; --r-2xl:26px; --r-pill:20px; --r-full:50%;

    /* — ขนาดตัวอักษร (type scale) — */
    --fs-2xs:10px;   /* ป้ายนับ */
    --fs-xs:11px;    /* ป้ายกำกับใต้ช่อง */
    --fs-sm:12px;    /* คำอธิบายรอง */
    --fs-base:13px;  /* ข้อความทั่วไป */
    --fs-md:14px;    /* รายการ */
    --fs-lg:15px;    /* หัวข้อย่อย */
    --fs-input:16px; /* ช่องกรอกทุกช่อง (ห้ามต่ำกว่านี้ — จอ iOS จะซูม) */
    --fs-xl:18px;
    --fs-2xl:20px;   /* หัว sheet */
    --fs-3xl:22px;
    --fs-d1:30px; --fs-d2:34px; --fs-d3:38px; --fs-d4:42px;   /* ตัวเลข/ไอคอนใหญ่พิเศษ */

    /* — ระยะห่าง — */
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;

    /* — ขนาดปุ่มมาตรฐาน — */
    --btn-icon:36px;   /* ปุ่มไอคอนกลม (header / มุมจอ / เมนู) */
    --btn-round:40px;  /* ปุ่มกลมใหญ่ (✕ ในหน้าเต็ม) */
    --tap-min:36px;    /* พื้นที่แตะขั้นต่ำ */

    /* — เงา — */
    --shadow-1:0 6px 18px rgba(0,0,0,0.45);
    --shadow-2:0 14px 34px rgba(0,0,0,0.6);

    /* — จังหวะเคลื่อนไหว — */
    --dur-fast:0.18s; --dur:0.25s; --dur-slow:0.35s;
    --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
    --hold-deep:2000;  /* กดค้าง 2 วิ = โหมดลึกกว่าแตะ (อ้างอิงในโค้ด) */

    /* — ชั้นความลึก (z-index) — */
    --z-tree:2; --z-node:3; --z-backdrop:8; --z-header:5; --z-fab:6; --z-page:7; --z-sheet:9; --z-modal:12;
  }

html.a11y-large{
    --fs-2xs:12px; --fs-xs:13px; --fs-sm:15px; --fs-base:16px; --fs-md:17px; --fs-lg:19px;
    --fs-input:19px; --fs-xl:22px; --fs-2xl:25px; --fs-3xl:27px;
    --fs-d1:34px; --fs-d2:38px; --fs-d3:42px; --fs-d4:46px;
    --btn-icon:44px; --btn-round:48px;
  }

html.a11y-contrast{
    --bg:#000000; --surface-1:#000000; --surface-2:#0B0B10; --surface-3:#141420; --surface-4:#1E1E2C;
    --text:#FFFFFF; --dim:#D6D2E4; --text-muted:#E8E5F2;
    --border:#6C6784; --border-strong:#9C97B4; --line:#6C6784;
    --green:#7CFFA6; --green-dim:rgba(124,255,166,0.28); --danger:#FF7C8C;
    --amber2:#FFD98A; --blue:#9CCBFF; --pink:#FFB8D8; --pink2:#DCB4FF; --chip-a:#3F3B52;
  }