/* ==========================================================================
   TripleZE — Design Tokens
   ที่มา: UI/UX Pro Max — style "Modern Dark (Cinema)" + pattern "Feature-Rich
   Showcase" (B2B SaaS) ปรับให้เข้ากับภาษาไทยและเว็บ PHP ล้วน

   กติกาที่ยึดจาก skill
   - ห้ามใช้ดำสนิท #000000 (เกิด OLED smear ขอบตัวอักษรเลอะบนจอ OLED)
   - เส้นขอบเป็น hairline โปร่งแสง ไม่ใช่เทาทึบ
   - easing เดียวทั้งเว็บ cubic-bezier(.16,1,.3,1)
   - กดแล้วย่อ 0.97 ไม่ขยับ layout
   - สเกลระยะ 4/8 · สเกลตัวอักษร 12→48
   ========================================================================== */

:root {
  /* ── ธีมมืด (ค่าเริ่มต้น) ─────────────────────────────── */
  --bg:            #06070A;
  --bg-elevated:   #0A0C11;
  --surface:       #0D0F15;
  --surface-2:     #12151C;
  --surface-3:     #171A22;

  --line:          rgba(255, 255, 255, .08);
  --line-strong:   rgba(255, 255, 255, .16);
  --line-solid:    #1B1F28;

  --ink:           #EDEDEF;
  --text:          #EDEDEF;
  --text-soft:     #949AA6;
  --text-dim:      #949AA6;
  --text-soft-2:   #9AA0AC;

  /* ปุ่มรอง/แผงเข้ม กลับด้านกันระหว่างสองธีม */
  --invert-bg:     #EDEDEF;
  --invert-fg:     #06070A;
  --invert-hover:  #FFFFFF;
  --panel:         #0A0C11;
  --panel-line:    rgba(255, 255, 255, .1);
  --panel-fg:      #EDEDEF;
  --panel-fg-soft: rgba(237, 237, 239, .66);

  /* ── สีแบรนด์: อินดิโก้ ─────────────────────────────────
     --accent      ใช้เป็นพื้น (ปุ่ม) คู่กับตัวหนังสือขาว
     --accent-text ใช้เป็นตัวหนังสือ/ไอคอนบนพื้นมืด (สว่างกว่าเพื่อให้ผ่าน AA) */
  --accent:        #5E6AD2;
  --accent-hover:  #6D78DC;
  --accent-text:   #98A2FF;
  --accent-soft:   rgba(94, 106, 210, .13);
  --accent-line:   rgba(94, 106, 210, .34);
  --accent-glow:   0 0 0 1px rgba(94, 106, 210, .35), 0 10px 30px -10px rgba(94, 106, 210, .55);
  --accent-ring:   rgba(94, 106, 210, .45);

  --ok:            var(--accent-text);
  --ok-soft:       var(--surface-2);
  --ok-text:       var(--ink);

  --header-bg:     rgba(6, 7, 10, .72);
  --scrim:         rgba(6, 7, 10, .6);

  /* แสงบรรยากาศจาง ๆ หลังฮีโร่ */
  --glow-1:        rgba(94, 106, 210, .16);
  --glow-2:        rgba(56, 189, 248, .08);

  --shadow-xs:     0 1px 2px rgba(0, 0, 0, .4);
  --shadow:        0 12px 32px -16px rgba(0, 0, 0, .8);
  --shadow-md:     0 24px 56px -24px rgba(0, 0, 0, .9);

  color-scheme: dark;
}

:root[data-theme="light"] {
  /* ── ธีมสว่าง ────────────────────────────────────────── */
  --bg:            #F7F8FB;
  --bg-elevated:   #FFFFFF;
  --surface:       #FFFFFF;
  --surface-2:     #F0F2F7;
  --surface-3:     #E8EBF2;

  --line:          rgba(16, 20, 32, .09);
  --line-strong:   rgba(16, 20, 32, .18);
  --line-solid:    #E3E6EE;

  --ink:           #14161C;
  --text:          #14161C;
  --text-soft:     #5B6172;
  --text-dim:      #5B6172;
  --text-soft-2:   #545A6B;

  --invert-bg:     #14161C;
  --invert-fg:     #FFFFFF;
  --invert-hover:  #262A36;
  --panel:         #0D0F15;
  --panel-line:    rgba(255, 255, 255, .1);
  --panel-fg:      #EDEDEF;
  --panel-fg-soft: rgba(237, 237, 239, .68);

  --accent:        #4338CA;
  --accent-hover:  #3A30B0;
  --accent-text:   #3A30B0;
  --accent-soft:   rgba(67, 56, 202, .08);
  --accent-line:   rgba(67, 56, 202, .24);
  --accent-glow:   0 0 0 1px rgba(67, 56, 202, .2), 0 10px 26px -12px rgba(67, 56, 202, .5);
  --accent-ring:   rgba(67, 56, 202, .4);

  --header-bg:     rgba(247, 248, 251, .78);
  --scrim:         rgba(16, 20, 32, .45);

  --glow-1:        rgba(67, 56, 202, .09);
  --glow-2:        rgba(14, 165, 233, .07);

  --shadow-xs:     0 1px 2px rgba(16, 20, 32, .05);
  --shadow:        0 12px 30px -16px rgba(16, 20, 32, .22);
  --shadow-md:     0 24px 52px -24px rgba(16, 20, 32, .3);

  color-scheme: light;
}

:root {
  /* ── สเกลระยะ 4/8 ────────────────────────────────────── */
  --s-1:  .25rem;   /*  4px */
  --s-2:  .5rem;    /*  8px */
  --s-3:  .75rem;   /* 12px */
  --s-4:  1rem;     /* 16px */
  --s-5:  1.5rem;   /* 24px */
  --s-6:  2rem;     /* 32px */
  --s-7:  3rem;     /* 48px */
  --s-8:  4rem;     /* 64px */

  /* ── สเกลตัวอักษร ─────────────────────────────────────── */
  --t-xs:   .75rem;    /* 12 */
  --t-sm:   .8125rem;  /* 13 */
  --t-base: .875rem;   /* 14 */
  --t-md:   1rem;      /* 16 */
  --t-lg:   1.125rem;  /* 18 */
  --t-xl:   1.5rem;    /* 24 */
  --t-2xl:  2rem;      /* 32 */
  --t-3xl:  3rem;      /* 48 */

  --wrap:   1160px;
  --gutter: clamp(1.15rem, 4vw, 2rem);
  --sec-y:  clamp(4rem, 9vw, 7.5rem);

  /* ── มุมมน: ตาม skill ใช้ 16 กับการ์ด ─────────────────── */
  --r-sm:   8px;
  --r:      12px;
  --r-lg:   16px;
  --r-xl:   20px;

  /* ── จังหวะการเคลื่อนไหว: ใช้ค่าเดียวทั้งเว็บ ──────────── */
  --ease:      cubic-bezier(.16, 1, .3, 1);
  --dur-fast:  .16s;
  --dur:       .24s;
  --dur-slow:  .36s;

  --font:      "IBM Plex Sans Thai", ui-sans-serif, "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
}