/*
 * context/ui/assets/pp-tokens.css — ตัวแปรสี/ระยะ/ฟอนต์ของ mockup
 *
 * ธีม "ขาว · เทา · แดง · ดำ" (2026-10-12)
 *   ขาว  = พื้นการ์ด/ฟอร์ม           (--pp-surface)
 *   เทา  = พื้นหน้า เส้น ตัวอักษรรอง  (--pp-bg · --pp-border · --pp-text-muted)
 *   แดง  = แบรนด์ + จุดเน้น (เมนู/แท็บที่เลือก ลิงก์ โฟกัส) (--pp-accent)
 *   ดำ   = topbar + ปุ่มหลัก + ตัวอักษร (--pp-primary · --pp-topbar-bg · --pp-text)
 *
 * 🔴 ปุ่มหลักเป็น "ดำ" ไม่ใช่ "แดง" โดยตั้งใจ — แดงเต็มปุ่มสงวนไว้ให้ action อันตราย
 *    (ยกเลิก / ตัดจำหน่าย / override) ถ้าปุ่ม "ยืนยันจ่าย" กับ "ยกเลิกคูปอง" สีเดียวกัน ผู้ใช้จะกดผิด
 * 🔴 สีสถานะ (เขียว/เหลือง/ฟ้า) คงไว้ — label map 48 §4.1 ผูกความหมายกับสี ตัดทิ้งไม่ได้
 *    แต่ปรับให้หม่นลงเข้ากับโทนเทา
 * ค่าระยะ/ฟอนต์ตรงกับ themes/pp/public/pp-tokens.css (53 §1.3)
 */

:root {
    color-scheme: light;

    /* ── ขาว / เทา ─────────────────────────────────────────────────────── */
    --pp-bg:            #f2f2f3;
    --pp-surface:       #ffffff;
    --pp-surface-alt:   #f0f0f1;
    --pp-border:        #d4d4d8;
    --pp-border-soft:   #e7e7ea;
    --pp-text:          #18181b;
    --pp-text-muted:    #5f5f68;

    /* ── ดำ — ปุ่มหลัก ──────────────────────────────────────────────────── */
    --pp-primary:       #18181b;
    --pp-primary-hover: #000000;
    --pp-primary-soft:  #e4e4e7;
    --pp-primary-text:  #ffffff;

    /* ── แดง — แบรนด์และจุดเน้น ─────────────────────────────────────────── */
    --pp-accent:        #d0101d;
    --pp-accent-hover:  #a80c17;
    --pp-accent-soft:   #fdecec;
    --pp-accent-text:   #ffffff;
    /* แดงของโลโก้ SCG (assets/scg_logo.webp) — ใช้กับส่วนแบรนด์เท่านั้น ไม่ใช้กับตัวอักษรเล็ก (contrast บนขาว < 4.5:1) */
    --pp-brand:         #ed2424;

    /* ── topbar ดำ ─────────────────────────────────────────────────────── */
    --pp-topbar-bg:     #111113;
    --pp-topbar-text:   #f4f4f5;
    --pp-topbar-muted:  #a1a1aa;
    --pp-topbar-border: #000000;
    --pp-topbar-hover:  #27272a;

    /* ── สีสถานะ (คงความหมายตาม 48 §4.1 · หม่นลง) ──────────────────────── */
    --pp-danger:        #b4121b;
    --pp-danger-bg:     #fbe3e4;
    --pp-warning:       #8a5a00;
    --pp-warning-bg:    #fdf1d6;
    --pp-success:       #1d6b45;
    --pp-success-bg:    #dcefe4;
    --pp-info:          #3f5f73;
    --pp-info-bg:       #e3ebf0;
    --pp-secondary:     #4b4b52;
    --pp-secondary-bg:  #e4e4e7;
    --pp-dark:          #f4f4f5;
    --pp-dark-bg:       #27272a;

    /* 🔴 ตัวเลขติดลบ — DEF-077: ต้องเห็น ห้าม clamp เป็น 0 */
    --pp-negative:      #b4121b;

    /* ── แถบสวมสิทธิ์ (SCR-36) — ต้องเด่นและต่างจากแดงของแบรนด์ ───────────── */
    --pp-impersonate-bg:   #5b21b6;
    --pp-impersonate-text: #ffffff;

    /* ── เมนูข้าง ──────────────────────────────────────────────────────── */
    --pp-nav-bg:        #ffffff;
    --pp-nav-active-bg: #fdecec;
    --pp-nav-active:    #b80e19;

    /* ── เงา/โฟกัส ─────────────────────────────────────────────────────── */
    --pp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
    --pp-shadow:    0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
    --pp-shadow-lg: 0 12px 32px rgba(0, 0, 0, .20);
    --pp-focus:     0 0 0 3px rgba(208, 16, 29, .28);
    --pp-scrim:     rgba(9, 9, 11, .55);

    /* ── ระยะ ───────────────────────────────────────────────────────────── */
    --pp-space-1: 4px;
    --pp-space-2: 8px;
    --pp-space-3: 12px;
    --pp-space-4: 16px;
    --pp-space-5: 24px;
    --pp-space-6: 32px;
    --pp-radius:    8px;
    --pp-radius-sm: 6px;
    --pp-radius-lg: 12px;

    /* 🔴 เกณฑ์มือถือ 23 §0.1 — ปุ่มทุกตัวแตะได้ ≥ 44px */
    --pp-tap-size: 44px;

    /* ── ตัวอักษร ───────────────────────────────────────────────────────── */
    --pp-font: "Noto Sans Thai", "Sarabun", system-ui, -apple-system, "Segoe UI", sans-serif;
    --pp-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
    --pp-font-size: 15px;
    --pp-font-size-sm: 13px;
    --pp-font-size-lg: 18px;
    --pp-line-height: 1.55;

    /* ── ความสูงของส่วนคงที่ ───────────────────────────────────────────── */
    --pp-bar-height: 56px;
    --pp-sidemenu-width: 264px;
    --pp-sign-pad-height: 180px;

    /* QR ต้องเข้มบนขาวเสมอ (สแกนได้) — ไม่เปลี่ยนตามธีมมืด */
    --pp-qr-fg: #000000;
    --pp-qr-bg: #ffffff;
}

/* ── ธีมมืด: ดำเป็นพื้น · ขาวเป็นปุ่มหลัก · แดงสว่างขึ้นให้ contrast ผ่าน AA ── */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --pp-bg:            #0c0c0d;
        --pp-surface:       #18181b;
        --pp-surface-alt:   #222226;
        --pp-border:        #3a3a40;
        --pp-border-soft:   #2a2a2f;
        --pp-text:          #f4f4f5;
        --pp-text-muted:    #a1a1aa;

        --pp-primary:       #f4f4f5;
        --pp-primary-hover: #ffffff;
        --pp-primary-soft:  #2a2a2f;
        --pp-primary-text:  #0c0c0d;

        --pp-accent:        #ff4d57;
        --pp-accent-hover:  #ff6b73;
        --pp-accent-soft:   #3a1215;
        --pp-accent-text:   #0c0c0d;

        --pp-topbar-bg:     #000000;
        --pp-topbar-text:   #f4f4f5;
        --pp-topbar-muted:  #a1a1aa;
        --pp-topbar-border: #2a2a2f;
        --pp-topbar-hover:  #222226;

        --pp-danger:        #ff6b73;
        --pp-danger-bg:     #3a1215;
        --pp-warning:       #f5c35b;
        --pp-warning-bg:    #352a10;
        --pp-success:       #6fcf9f;
        --pp-success-bg:    #12291d;
        --pp-info:          #9fbccc;
        --pp-info-bg:       #1b262d;
        --pp-secondary:     #c4c4cc;
        --pp-secondary-bg:  #2a2a2f;
        --pp-dark:          #0c0c0d;
        --pp-dark-bg:       #d4d4d8;

        --pp-negative:      #ff6b73;

        --pp-impersonate-bg:   #8b5cf6;
        --pp-impersonate-text: #0c0c0d;

        --pp-nav-bg:        #121214;
        --pp-nav-active-bg: #3a1215;
        --pp-nav-active:    #ff6b73;

        --pp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
        --pp-shadow:    0 1px 3px rgba(0, 0, 0, .6);
        --pp-shadow-lg: 0 12px 32px rgba(0, 0, 0, .7);
        --pp-focus:     0 0 0 3px rgba(255, 77, 87, .45);
        --pp-scrim:     rgba(0, 0, 0, .7);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --pp-bg:            #0c0c0d;
    --pp-surface:       #18181b;
    --pp-surface-alt:   #222226;
    --pp-border:        #3a3a40;
    --pp-border-soft:   #2a2a2f;
    --pp-text:          #f4f4f5;
    --pp-text-muted:    #a1a1aa;

    --pp-primary:       #f4f4f5;
    --pp-primary-hover: #ffffff;
    --pp-primary-soft:  #2a2a2f;
    --pp-primary-text:  #0c0c0d;

    --pp-accent:        #ff4d57;
    --pp-accent-hover:  #ff6b73;
    --pp-accent-soft:   #3a1215;
    --pp-accent-text:   #0c0c0d;

    --pp-topbar-bg:     #000000;
    --pp-topbar-text:   #f4f4f5;
    --pp-topbar-muted:  #a1a1aa;
    --pp-topbar-border: #2a2a2f;
    --pp-topbar-hover:  #222226;

    --pp-danger:        #ff6b73;
    --pp-danger-bg:     #3a1215;
    --pp-warning:       #f5c35b;
    --pp-warning-bg:    #352a10;
    --pp-success:       #6fcf9f;
    --pp-success-bg:    #12291d;
    --pp-info:          #9fbccc;
    --pp-info-bg:       #1b262d;
    --pp-secondary:     #c4c4cc;
    --pp-secondary-bg:  #2a2a2f;
    --pp-dark:          #0c0c0d;
    --pp-dark-bg:       #d4d4d8;

    --pp-negative:      #ff6b73;

    --pp-impersonate-bg:   #8b5cf6;
    --pp-impersonate-text: #0c0c0d;

    --pp-nav-bg:        #121214;
    --pp-nav-active-bg: #3a1215;
    --pp-nav-active:    #ff6b73;

    --pp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --pp-shadow:    0 1px 3px rgba(0, 0, 0, .6);
    --pp-shadow-lg: 0 12px 32px rgba(0, 0, 0, .7);
    --pp-focus:     0 0 0 3px rgba(255, 77, 87, .45);
    --pp-scrim:     rgba(0, 0, 0, .7);
}