/* ============================================================
   MW DESIGN SYSTEM · V.3  —  tokens.css
   Movewinbet · Bright Luxury Black / Gold
   ทุกค่าออกแบบให้ "เรียบแต่หรู" (refined luxury)
   ============================================================ */
:root{

  /* ─────────────────────────────────────────────
     1. BRAND / PRIMARY COLORS  (สีหลักของแบรนด์)
     ทองสว่างระยิบระยับ = พระเอกของระบบ
  ───────────────────────────────────────────── */
  --gold-50 :#FFF8E1;
  --gold-100:#FFEFB0;
  --gold-200:#FCE188;
  --gold-300:#F8D45C;
  --gold-400:#F2C744;
  --gold-500:#EFBF3B;   /* PRIMARY */
  --gold-600:#D9A521;
  --gold-700:#B07E16;
  --gold-800:#80590E;
  --gold-900:#5C420C;
  --gold-highlight:#FFEDA6;
  --gold-shadow:#A57C16;
  --gold-champagne:#FBE8BE;
  --grad-gold:linear-gradient(135deg,#FFF0AE 0%,#F8DC72 20%,#EFBF3B 46%,#CC9C22 70%,#FFE9A0 100%);
  --grad-gold-soft:linear-gradient(180deg,#F8D45C 0%,#D9A521 100%);
  --grad-gold-text:linear-gradient(92deg,#FFEDA6 0%,#EFBF3B 46%,#D9A521 100%);
  --grad-gold-sheen:linear-gradient(120deg,#C99A22 0%,#FFEDA6 26%,#EFBF3B 50%,#FFF6C8 72%,#C99A22 100%);
  --grad-gold-line:linear-gradient(90deg,transparent,var(--gold-500),transparent);

  /* ─────────────────────────────────────────────
     2. SECONDARY / ACCENT COLORS  (สีรอง / สีเน้น)
     ไวน์แดง royal + แพลทินัม
  ───────────────────────────────────────────── */
  --wine-100:#E9C6CB;
  --wine-300:#C06A75;
  --wine-500:#8E2230;   /* ACCENT */
  --wine-700:#5E141E;
  --wine-900:#380A11;
  --platinum-100:#EDEFF2;
  --platinum-300:#C7CBD1;
  --platinum-500:#9AA0A9;
  --platinum-700:#6B7077;
  --grad-platinum:linear-gradient(135deg,#F2F4F7 0%,#C7CBD1 42%,#9AA0A9 72%,#E2E5EA 100%);

  /* ─────────────────────────────────────────────
     3. SEMANTIC / FEEDBACK COLORS  (สีสื่อความหมาย)
  ───────────────────────────────────────────── */
  --success:#2EBE79; --success-strong:#1FA86B; --success-soft:rgba(46,190,121,.14); --success-border:rgba(46,190,121,.40);
  --warning:#F2933C; --warning-strong:#E07C1E; --warning-soft:rgba(242,147,60,.14); --warning-border:rgba(242,147,60,.42);
  --danger :#EB4D4B; --danger-strong :#D8322F; --danger-soft :rgba(235,77,75,.14);  --danger-border :rgba(235,77,75,.44);
  --info   :#4D9BFF; --info-strong   :#2D80F2; --info-soft   :rgba(77,155,255,.14); --info-border   :rgba(77,155,255,.42);

  /* ─────────────────────────────────────────────
     4. NEUTRAL / GRAYSCALE COLORS  (สีโทนกลาง — warm ink)
  ───────────────────────────────────────────── */
  --ink-0  :#FFFFFF;
  --ink-50 :#F4F3EF;   /* TEXT หลัก */
  --ink-100:#E4E2DB;
  --ink-200:#C9C6BD;
  --ink-300:#A6A29A;
  --ink-400:#7C7870;
  --ink-500:#5A5750;
  --ink-600:#423F3A;
  --ink-700:#2E2C29;
  --ink-800:#211F1D;
  --ink-850:#1A1917;
  --ink-900:#131210;
  --ink-950:#0B0A09;

  /* ─────────────────────────────────────────────
     5. BACKGROUND & SURFACE COLORS  (พื้นหลัง / พื้นผิว)
  ───────────────────────────────────────────── */
  --bg-base:#0B0A09;
  --bg-elev-0:#100F0D;
  --surface-1:#161513;        /* การ์ด */
  --surface-2:#1E1C19;        /* การ์ดยกระดับ / modal */
  --surface-3:#262320;        /* dropdown / popover */
  --surface-inverse:#F4F3EF;
  --surface-glass:rgba(255,255,255,.015);
  --surface-gold-tint:rgba(239,191,59,.07);
  --overlay-scrim:rgba(0,0,0,.66);
  --border-subtle:rgba(255,255,255,.07);
  --border-default:rgba(255,255,255,.11);
  --border-strong:rgba(255,255,255,.18);
  --border-gold:rgba(239,191,59,.40);
  --border-gold-strong:rgba(239,191,59,.72);

  /* ─────────────────────────────────────────────
     6. INTERACTIVE STATE COLORS  (สถานะการโต้ตอบ)
  ───────────────────────────────────────────── */
  --state-hover-overlay:rgba(255,255,255,.06);
  --state-active-overlay:rgba(0,0,0,.20);
  --state-selected-bg:rgba(239,191,59,.15);
  --state-disabled-opacity:.40;
  --focus-ring:0 0 0 3px rgba(239,191,59,.48);
  --on-gold:#2A1E03;          /* ข้อความบนพื้นทอง */
  --on-success:#062014;

  /* ─────────────────────────────────────────────
     SHADOWS & GLOW  (เงาหรูหรา)
  ───────────────────────────────────────────── */
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow-md:0 10px 28px rgba(0,0,0,.5);
  --shadow-lg:0 24px 60px rgba(0,0,0,.62);
  --shadow-luxe:0 22px 60px -16px rgba(0,0,0,.75),0 6px 20px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,237,166,.12);
  --glow-gold:0 0 0 1px rgba(239,191,59,.5),0 10px 34px rgba(239,191,59,.36);
  --glow-gold-strong:0 0 32px rgba(239,191,59,.62);

  /* ─────────────────────────────────────────────
     TYPOGRAPHY
  ───────────────────────────────────────────── */
  --font-display:'Cinzel',serif;        /* โลโก้ / ตัวเลขใหญ่ */
  --font-head:'Trirong',serif;          /* หัวเรื่องไทย */
  --font-body:'IBM Plex Sans Thai',sans-serif; /* เนื้อหา / UI */

  /* ─────────────────────────────────────────────
     RADII / SPACING / MOTION
  ───────────────────────────────────────────── */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur-fast:.16s; --dur:.24s; --dur-slow:.5s;

  /* ─────────────────────────────────────────────
     RESPONSIVE BREAKPOINTS (อ้างอิงใน responsive.css)
     mobile  : ≤ 640px
     tablet  : 641px – 1024px
     desktop : ≥ 1025px
  ───────────────────────────────────────────── */
  --bp-mobile:640px;
  --bp-tablet:1024px;
}