/* ============================================================
   theme-tokens.css — ระบบธีม 2 ชั้น (§1)
   ชั้น 1: 14 core token ต่อ preset  [data-theme="..."]
   ชั้น 2: derive layer (คำนวณจาก core)  html[data-theme]
   14 core: --bg1 --bg2 --surf --edge --prim --prim2 --txt --sub --glow
            --gold-hi --gold --gold-lo --gold-ink --gold-glow
   preset: maruay (default) · g1-g8 (เรืองแสง) · c1-c5 (classic)
   ============================================================ */

/* ---- :root = ค่า default (maruay-gold) เผื่อไม่มี data-theme ---- */
:root {
  --bg1:#211B3A; --bg2:#10152a; --surf:#241d44; --edge:#c08205;
  --prim:#ff7501; --prim2:#ffbd0c; --txt:#ffffff; --sub:#EBE6FF; --glow:rgba(139,58,188,.5);
  --gold-hi:#ffd700; --gold:#ffbd0c; --gold-lo:#b97b01; --gold-ink:#3a2400; --gold-glow:rgba(255,189,12,.5);
}

/* ===== PRESETS (ประกาศแค่ 14 core — derive ได้เอง) ===== */
[data-theme="maruay"]{
  --bg1:#211B3A; --bg2:#10152a; --surf:#241d44; --edge:#c08205;
  --prim:#ff7501; --prim2:#ffbd0c; --txt:#ffffff; --sub:#EBE6FF; --glow:rgba(139,58,188,.5);
  --gold-hi:#ffd700; --gold:#ffbd0c; --gold-lo:#b97b01; --gold-ink:#3a2400; --gold-glow:rgba(255,189,12,.5);
}

/* --- ชุดเรืองแสง (จาก themes ชุด1.css) --- */
[data-theme="g1"]{ --bg1:#1a0730; --bg2:#0a0416; --surf:#22093c; --edge:#3d1560; --prim:#ff4ecd; --prim2:#a821c9; --txt:#fff; --sub:#c79ae0; --glow:rgba(255,78,205,.55); --gold-hi:#8ff6ff; --gold:#22d3ee; --gold-lo:#0891b2; --gold-ink:#04222a; --gold-glow:rgba(78,224,255,.55); }
[data-theme="g2"]{ --bg1:#2a0608; --bg2:#12030a; --surf:#360a10; --edge:#5e1620; --prim:#ff3b52; --prim2:#b01023; --txt:#fff; --sub:#e6a2ab; --glow:rgba(255,59,82,.5); --gold-hi:#ffe89a; --gold:#f5c542; --gold-lo:#a9770a; --gold-ink:#3a2400; --gold-glow:rgba(245,197,66,.6); }
[data-theme="g3"]{ --bg1:#03211a; --bg2:#01100c; --surf:#073327; --edge:#0f5c46; --prim:#25f5a9; --prim2:#0f9e6f; --txt:#fff; --sub:#8fe6c9; --glow:rgba(37,245,169,.5); --gold-hi:#ffe89a; --gold:#f5c542; --gold-lo:#a9770a; --gold-ink:#2a2000; --gold-glow:rgba(245,197,66,.55); }
[data-theme="g4"]{ --bg1:#170a34; --bg2:#0b0518; --surf:#1f0f45; --edge:#3a1c6e; --prim:#a06bff; --prim2:#7028d6; --txt:#fff; --sub:#c3aef0; --glow:rgba(160,107,255,.55); --gold-hi:#ff9ecb; --gold:#ff4ea3; --gold-lo:#c01e6a; --gold-ink:#3a0620; --gold-glow:rgba(255,78,163,.55); }
[data-theme="g5"]{ --bg1:#04182a; --bg2:#020c16; --surf:#062741; --edge:#0d4a72; --prim:#22c1ff; --prim2:#0e7fd6; --txt:#fff; --sub:#8fd4f5; --glow:rgba(34,193,255,.55); --gold-hi:#d6ff5c; --gold:#a3e635; --gold-lo:#5c8a10; --gold-ink:#1a2e00; --gold-glow:rgba(163,230,53,.55); }
[data-theme="g6"]{ --bg1:#2b1103; --bg2:#150802; --surf:#3a1806; --edge:#6e3110; --prim:#ff8a3c; --prim2:#e0521a; --txt:#fff; --sub:#f0c39a; --glow:rgba(255,138,60,.55); --gold-hi:#ff9ec9; --gold:#ff4e8f; --gold-lo:#c01e5c; --gold-ink:#3a0618; --gold-glow:rgba(255,78,143,.5); }
[data-theme="g7"]{ --bg1:#25060f; --bg2:#110309; --surf:#310a15; --edge:#5c1a2c; --prim:#ff4d6d; --prim2:#c01840; --txt:#fff; --sub:#f0a8b6; --glow:rgba(255,77,109,.5); --gold-hi:#ffd9c2; --gold:#e8a074; --gold-lo:#a86840; --gold-ink:#3a1810; --gold-glow:rgba(232,160,116,.55); }
[data-theme="g8"]{ --bg1:#081726; --bg2:#030b14; --surf:#0c2233; --edge:#1a4260; --prim:#5ce1ff; --prim2:#2a9fd6; --txt:#fff; --sub:#a8dcf0; --glow:rgba(92,225,255,.5); --gold-hi:#f0f4ff; --gold:#c4cfe0; --gold-lo:#8593aa; --gold-ink:#1a2230; --gold-glow:rgba(196,207,224,.5); }

/* --- ชุด classic (จาก themes-classic ชุด2.css) — เติม --glow/--gold-glow ที่ต้นฉบับไม่มี --- */
[data-theme="c1"]{ --bg1:#0d1e44; --bg2:#050d20; --surf:#13285a; --edge:#22417e; --prim:#2f6bff; --prim2:#1642c4; --txt:#eef3ff; --sub:#a8c2ee; --glow:rgba(47,107,255,.5); --gold-hi:#ffe08a; --gold:#f5c542; --gold-lo:#b8860b; --gold-ink:#3a2400; --gold-glow:rgba(245,197,66,.5); }
[data-theme="c2"]{ --bg1:#2c0810; --bg2:#160409; --surf:#3d0d16; --edge:#661a26; --prim:#e11d3a; --prim2:#a80f24; --txt:#fff0f2; --sub:#f0aab4; --glow:rgba(225,29,58,.5); --gold-hi:#ffe08a; --gold:#f5c542; --gold-lo:#b8860b; --gold-ink:#3a2400; --gold-glow:rgba(245,197,66,.5); }
[data-theme="c3"]{ --bg1:#06281c; --bg2:#02130d; --surf:#0a3a2a; --edge:#136048; --prim:#12b877; --prim2:#0a8a58; --txt:#eefaf4; --sub:#a0ddc4; --glow:rgba(18,184,119,.5); --gold-hi:#ffe08a; --gold:#f5c542; --gold-lo:#b8860b; --gold-ink:#2a2000; --gold-glow:rgba(245,197,66,.5); }
[data-theme="c4"]{ --bg1:#1e0a44; --bg2:#0e0522; --surf:#2a1258; --edge:#452088; --prim:#8b3ef5; --prim2:#6620c4; --txt:#f3eeff; --sub:#c6aef0; --glow:rgba(139,62,245,.5); --gold-hi:#ffe08a; --gold:#f5c542; --gold-lo:#b8860b; --gold-ink:#2c1e00; --gold-glow:rgba(245,197,66,.5); }
[data-theme="c5"]{ --bg1:#1a1310; --bg2:#0b0806; --surf:#241813; --edge:#402a20; --prim:#e0202e; --prim2:#a01018; --txt:#f6efe8; --sub:#d4b8a8; --glow:rgba(224,32,46,.5); --gold-hi:#ffe08a; --gold:#f5c542; --gold-lo:#b8860b; --gold-ink:#3a2400; --gold-glow:rgba(245,197,66,.5); }

/* ===== DERIVE LAYER — คำนวณจาก 14 core (specificity ชนะ :root) ===== */
html[data-theme]{
  /* map เข้าตัวแปรที่ style.css ใช้อยู่แล้ว → ธีมไหลเข้าทันที */
  --main-color: var(--prim);
  --secondary-color: var(--sub);
  --Linear: linear-gradient(180deg, var(--prim) 0%, var(--prim2) 100%);

  /* derive เสริม */
  --gold-grad: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 50%, var(--gold-lo) 100%);
  --page-grad: linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%);
  --surf-2: color-mix(in srgb, var(--surf) 82%, #000);
  --edge-soft: color-mix(in srgb, var(--edge) 55%, transparent);
  --prim-soft: color-mix(in srgb, var(--prim) 18%, transparent);
  --prim-hover: color-mix(in srgb, var(--prim) 85%, #000);

  /* สถานะ + เสริม (default คงที่ทุกธีม — แก้ทับได้ในหน้า studio) */
  --success: #16b877; --success-2: #0a8a58;
  --danger: #dc2626; --danger-2: #a01018;
  --warning: #f2bc3f; --info: #2479dc;
  --accent: #6024dc; --ink: #0a0a12; --muted: #7c7c8f;
}