/* ============================================================
   FlowIQ — Design Foundation (single source of truth)
   ------------------------------------------------------------
   ขอบเขตไฟล์นี้: design tokens + base reset + type helpers + ปุ่ม
   (เฉพาะของที่ใช้ร่วมกันทุกหน้า และ "ไม่ชนชื่อ" ระหว่าง surface)

   สิ่งที่จงใจ "ไม่" ใส่ในไฟล์นี้ เพราะนิยามต่างกันตาม surface:
     .hero       -> landing = section มืด / dashboard = การ์ด Runway
     .eyebrow    -> landing = ทอง+brand / app = neutral
     animations  -> .rise/.draw/.reveal ไทม์มิ่งต่างกัน
   ของพวกนี้จะอยู่ในไฟล์ CSS ของแต่ละหน้า (โหลดทีหลังไฟล์นี้)

   ⚠️ Fonts: โหลดผ่าน <link> Google Fonts ใน host page + landing
   (Fraunces opsz 9..144 wght 400-700, IBM Plex Sans Thai 300-700,
    IBM Plex Mono 400-600) — ไม่ @import ที่นี่
   ============================================================ */

:root{
  /* ---- base / ink ---- */
  --ink:#13211C; --ink-2:#52615B; --ink-3:#869089;
  --paper:#EFF2F0; --card:#FFFFFF; --line:#E1E6E2; --line-2:#EDF0ED;

  /* ---- brand: เขียวหยก + ทองบาท ---- */
  --brand:#0B6E63; --brand-2:#11a08f; --brand-ink:#063F39; --brand-wash:#E4F1EE;
  --gold:#BE8C2C; --gold-2:#d6a338; --gold-wash:#F7EFDC;

  /* ---- semantic (แยกจาก brand: เขียวหยก != เขียว positive) ---- */
  --pos:#18936A; --pos-wash:#E3F2EB;
  --caution:#B6760F; --caution-wash:#FAF0DC;
  --crit:#C8463C; --crit-wash:#FBE9E7;
  --info:#3F6FB5; --info-wash:#E9F0F8;

  /* ---- dark surfaces: hero / security (landing) ---- */
  --dark:#0E1C18; --dark-2:#0A1512;
  --dark-tx:#C2D2CB; --dark-tx-2:#7E938B; --dark-tx-3:#5C6F67;
  --dark-line:rgba(255,255,255,.09);

  /* ---- sidebar (ink-teal) — alias ชุด dark สำหรับ app shell ---- */
  --sb:#0E1C18; --sb-2:#0A1512;
  --sb-tx:#C2D2CB; --sb-tx-2:#7E938B; --sb-tx-3:#5C6F67;
  --sb-line:rgba(255,255,255,.07);

  /* ---- typography ---- */
  --sans:"IBM Plex Sans Thai","IBM Plex Sans",system-ui,sans-serif;
  --fig:"Fraunces",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  /* ---- radius / shadow / layout ---- */
  --r-sm:10px; --r:14px; --r-lg:20px;
  --sh-1:0 1px 2px rgba(19,33,28,.04),0 2px 8px rgba(19,33,28,.05);
  --sh-2:0 6px 18px rgba(19,33,28,.08),0 20px 50px rgba(19,33,28,.08);
  --gut:20px; --sbw:256px;
}

/* ============================================================
   BASE RESET
   - ไม่ตั้ง background ที่ body (แต่ละ surface กำหนดเอง:
     app = --paper, landing = --card) เพื่อกันการเขียนทับ
   - font-size base = 14px (app); landing override เป็น 15px
     ในไฟล์ของ landing เอง
   ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{
  font-family:var(--sans);
  color:var(--ink);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
svg{display:block}

/* ============================================================
   TYPE HELPERS (เหมือนกันทุก surface)
   - .fig  = ตัวเลข/เงิน/สถิติ (Fraunces, tabular) — Latin เท่านั้น
             ห้ามใช้กับข้อความไทย (Fraunces ไม่มี glyph ไทย)
   - .mono = label เล็ก / eyebrow / timestamp / unit code
   ============================================================ */
.fig{
  font-family:var(--fig);
  font-feature-settings:"tnum" 1;
  letter-spacing:-.01em;
  font-optical-sizing:auto;
}
.mono{font-family:var(--mono)}

/* ============================================================
   BUTTON SYSTEM (ชื่อ variant ไม่ชนกันระหว่าง surface)
   - .btn        = base (ขนาด app: 38px)
   - .btn-lg     = ขนาดใหญ่สำหรับ landing CTA (46px)
   - variants    : สี (ใช้ร่วมกับ .btn)
       .btn-primary / .btn-jade  -> เขียวหยกทึบ
       .btn-gold                 -> ทองบาท gradient
       .btn-ghost                -> พื้นขาว ขอบ line (บนพื้นสว่าง)
       .btn-ghost-d              -> โปร่ง ขอบขาวจาง (บนพื้นมืด)
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  height:38px;padding:0 16px;border-radius:10px;
  font-family:var(--sans);font-size:13px;font-weight:600;
  cursor:pointer;border:1px solid transparent;transition:.15s;
}
.btn-lg{gap:8px;height:46px;padding:0 22px;border-radius:11px;font-size:15px}

.btn-primary,.btn-jade{background:var(--brand);color:#fff;box-shadow:0 2px 10px rgba(11,110,99,.28)}
.btn-primary:hover,.btn-jade:hover{background:#0a5f56}

.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#2c1f04;box-shadow:0 4px 16px rgba(190,140,44,.32)}
.btn-gold:hover{filter:brightness(1.05)}

.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:#cdd6d1}

.btn-ghost-d{background:transparent;border-color:rgba(255,255,255,.22);color:#eaf3ef}
.btn-ghost-d:hover{border-color:rgba(255,255,255,.4)}

/* ============================================================
   FOCUS (a11y) — ใช้ brand เป็น default ทั้งระบบ
   ============================================================ */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}