:root {

    /* ==========================================================
       สี
       ==========================================================
       ระบบสีมีสามระดับต่อหนึ่งความหมาย และแต่ละระดับมีที่ใช้ตายตัว

         --c-x-tint    พื้นหลังพาสเทล  ใช้กับการ์ด แถบ และ badge
         --c-x         ไอคอนและเส้น    ผ่าน contrast 3:1 ตาม WCAG 1.4.11
         --c-x-deep    ตัวอักษรและปุ่ม  ผ่าน contrast 4.5:1 ตาม WCAG 1.4.3

       ห้ามใช้ --c-x กับข้อความขนาดปกติ และห้ามใช้ --c-x-tint กับสิ่งที่ต้องอ่าน
       ทุกค่าตรวจ contrast ไว้แล้วบนพื้น --c-bg และ --c-surface

       §27.3 ห้ามใช้สีเป็นตัวบอกสถานะเพียงอย่างเดียว ต้องมีไอคอนหรือข้อความกำกับเสมอ
    */

    /* กลาง */
    --c-bg:            #f7f9f8;
    --c-surface:       #ffffff;
    --c-surface-sunk:  #f2f5f4;
    --c-border:        #e4eae7;
    --c-border-strong: #cfd9d4;
    --c-text:          #1b2a24;
    --c-text-muted:    #61736b;

    /* แบรนด์ — เขียวมิ้นต์ */
    --c-brand-tint: #e9f5ef;
    --c-brand:      #2e9070;
    --c-brand-deep: #1e7355;

    /* Coin — พีช */
    --c-coin-tint: #fdf2e4;
    --c-coin:      #b07a1e;
    --c-coin-deep: #96601a;

    /* เงินจริง — ฟ้าอ่อน */
    --c-money-tint: #eaf1fa;
    --c-money:      #4e86c4;
    --c-money-deep: #2f5d91;

    /* XP — ลาเวนเดอร์ */
    --c-xp-tint: #f1eefa;
    --c-xp:      #7a63c9;
    --c-xp-deep: #584293;

    /* สถานะ */
    --c-danger-tint:  #fceded;
    --c-danger:       #c55049;
    --c-danger-deep:  #9c3831;

    --c-warning-tint: #fdf4e3;
    --c-warning:      #a8741a;
    --c-warning-deep: #8c6115;

    --c-success-tint: var(--c-brand-tint);
    --c-success:      var(--c-brand);
    --c-success-deep: var(--c-brand-deep);

    /* ==========================================================
       ระยะ — ทวีคูณของ 4px
       ========================================================== */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;

    /* ==========================================================
       รูปทรง
       ========================================================== */
    --radius-sm:   8px;
    --radius:      14px;
    --radius-lg:   20px;
    --radius-pill: 999px;

    /* เงาบางมากโดยตั้งใจ — งานสไตล์ minimal ใช้เส้นขอบแยกชั้นแทนเงา */
    --shadow-sm: 0 1px 2px rgba(27, 42, 36, .05);
    --shadow:    0 4px 16px rgba(27, 42, 36, .07);

    /* ==========================================================
       ตัวอักษร
       ========================================================== */
    /* Sarabun self-host ไว้ที่ /shared/fonts/ — ดู shared/fonts.css
       ฟอนต์สำรองไล่ตามระบบปฏิบัติการเผื่อไฟล์โหลดไม่สำเร็จ */
    --font: "Sarabun", "Noto Sans Thai", -apple-system, BlinkMacSystemFont,
            "Segoe UI", "Leelawadee UI", Roboto, sans-serif;

    --fs-xs:  12px;
    --fs-sm:  14px;
    --fs-md:  16px;
    --fs-lg:  20px;
    --fs-xl:  26px;
    --fs-2xl: 34px;

    --lh-tight: 1.3;
    --lh-body:  1.65;

    /* ==========================================================
       ขนาดที่ใช้ร่วมกัน
       ========================================================== */
    --touch-min:  44px;   /* §27.3 ขนาดต่ำสุดของสิ่งที่กดได้ */
    --nav-height: 64px;
    --icon-sm:    18px;
    --icon:       22px;
    --icon-lg:    28px;
    --icon-xl:    40px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    line-height: var(--lh-tight);
    font-weight: 700;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

/* §27.3 โฟกัสต้องเห็นชัดเมื่อใช้คีย์บอร์ด */
:focus-visible {
    outline: 3px solid var(--c-brand);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

a { color: var(--c-brand-deep); }

/* ไอคอนทุกตัวสืบสีจากข้อความรอบตัว จึงเปลี่ยนสีได้จาก parent ที่เดียว */
.icon {
    display: inline-block;
    flex: none;
    vertical-align: -0.15em;
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}