/* =========================================================
   Admin Theme — named style palettes
   Load AFTER theme.css. Set data-style + data-theme on <html>.

   Each style defines ONLY neutral surfaces + elevation.
   The accent (--primary / --primary-fg / --primary-text) is set
   separately, so any style can pair with any accent colour.

   To add a style: copy a block, rename, adjust the 9 values.
   ========================================================= */

@layer tokens {

  /* ---------- Vega — เทากลาง คมชัด มาตรฐาน ---------- */
  [data-style="vega"] {
    --bg: #ffffff; --fg: #09090b; --card: #ffffff;
    --muted: #f4f4f5; --muted-fg: #5e5e67;
    --border: #e4e4e7; --input: #8b8b93; --ring: #6e6e78;
    --sidebar: #fafafa; --hover: #f4f4f5; --overlay: rgba(9,9,11,.55);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
    --shadow-md: 0 4px 14px rgba(0,0,0,.06);
    --shadow-lg: 0 20px 50px rgba(0,0,0,.20);
  }
  [data-style="vega"][data-theme="dark"] {
    --bg: #09090b; --fg: #fafafa; --card: #0c0c0f;
    --muted: #1c1c20; --muted-fg: #a1a1aa;
    --border: #27272a; --input: #62626b; --ring: #8b8b96;
    --sidebar: #111114; --hover: #1c1c20; --overlay: rgba(0,0,0,.65);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
    --shadow-md: 0 4px 14px rgba(0,0,0,.5);
    --shadow-lg: 0 20px 50px rgba(0,0,0,1);
  }

  /* ---------- Nova — โทนอุ่น กระดาษครีม ---------- */
  [data-style="nova"] {
    --bg: #fdfcfa; --fg: #1c1917; --card: #ffffff;
    --muted: #f5f2ed; --muted-fg: #67615b;
    --border: #e7e2d9; --input: #948d80; --ring: #786f68;
    --sidebar: #f7f4ef; --hover: #f0ece4; --overlay: rgba(28,25,23,.55);
    --shadow-sm: 0 1px 2px rgba(60,45,25,.07);
    --shadow-md: 0 4px 14px rgba(60,45,25,.07);
    --shadow-lg: 0 20px 50px rgba(60,45,25,.24);
  }
  [data-style="nova"][data-theme="dark"] {
    --bg: #171412; --fg: #faf8f5; --card: #1d1a17;
    --muted: #292421; --muted-fg: #a8a29e;
    --border: #332e29; --input: #6b645c; --ring: #948d85;
    --sidebar: #1a1715; --hover: #292421; --overlay: rgba(0,0,0,.66);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.55);
    --shadow-md: 0 4px 14px rgba(0,0,0,.55);
    --shadow-lg: 0 20px 50px rgba(0,0,0,1);
  }

  /* ---------- Maia — สเลตโทนเย็น สุขุม ---------- */
  [data-style="maia"] {
    --bg: #ffffff; --fg: #0f172a; --card: #ffffff;
    --muted: #f1f5f9; --muted-fg: #57647a;
    --border: #e2e8f0; --input: #7f8ca1; --ring: #67758c;
    --sidebar: #f8fafc; --hover: #f1f5f9; --overlay: rgba(15,23,42,.55);
    --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
    --shadow-md: 0 4px 14px rgba(15,23,42,.06);
    --shadow-lg: 0 20px 50px rgba(15,23,42,.22);
  }
  [data-style="maia"][data-theme="dark"] {
    --bg: #020617; --fg: #f8fafc; --card: #0b1220;
    --muted: #1e293b; --muted-fg: #94a3b8;
    --border: #1e293b; --input: #55627a; --ring: #8496b0;
    --sidebar: #0a1020; --hover: #1e293b; --overlay: rgba(0,0,0,.66);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.55);
    --shadow-md: 0 4px 14px rgba(0,0,0,.55);
    --shadow-lg: 0 20px 50px rgba(0,0,0,1);
  }

  /* ---------- Lyra — คอนทราสต์สูง ขอบเหลี่ยม ---------- */
  [data-style="lyra"] {
    --bg: #ffffff; --fg: #000000; --card: #ffffff;
    --muted: #f0f0f0; --muted-fg: #4a4a4a;
    --border: #000000; --input: #000000; --ring: #000000;
    --sidebar: #ffffff; --hover: #f0f0f0; --overlay: rgba(0,0,0,.6);
    --shadow-sm: 0 1px 0 rgba(0,0,0,1);
    --shadow-md: 3px 3px 0 rgba(0,0,0,1);
    --shadow-lg: 6px 6px 0 rgba(0,0,0,1);
  }
  [data-style="lyra"][data-theme="dark"] {
    --bg: #000000; --fg: #ffffff; --card: #0a0a0a;
    --muted: #1a1a1a; --muted-fg: #a3a3a3;
    --border: #4d4d4d; --input: #6a6a6a; --ring: #ffffff;
    --sidebar: #000000; --hover: #1a1a1a; --overlay: rgba(0,0,0,.75);
    --shadow-sm: 0 1px 0 rgba(255,255,255,.22);
    --shadow-md: 3px 3px 0 rgba(255,255,255,.22);
    --shadow-lg: 6px 6px 0 rgba(255,255,255,.22);
  }

  /* ---------- Mira — อมม่วง ขอบมนมาก เงานุ่ม ---------- */
  [data-style="mira"] {
    --bg: #fdfcff; --fg: #1e1b2e; --card: #ffffff;
    --muted: #f4f1fb; --muted-fg: #5f597a;
    --border: #e8e3f5; --input: #8d84ad; --ring: #7a6fa1;
    --sidebar: #f7f4fd; --hover: #efeaf9; --overlay: rgba(30,27,46,.55);
    --shadow-sm: 0 1px 2px rgba(50,35,95,.08);
    --shadow-md: 0 6px 20px rgba(50,35,95,.10);
    --shadow-lg: 0 24px 56px rgba(50,35,95,.26);
  }
  [data-style="mira"][data-theme="dark"] {
    --bg: #100d1a; --fg: #f6f4fd; --card: #171327;
    --muted: #231d38; --muted-fg: #a49dbd;
    --border: #2c2545; --input: #635a80; --ring: #9c90c4;
    --sidebar: #130f20; --hover: #231d38; --overlay: rgba(0,0,0,.68);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.6);
    --shadow-md: 0 6px 20px rgba(0,0,0,.6);
    --shadow-lg: 0 24px 56px rgba(0,0,0,1);
  }

  /* ---------- Luma — โปร่ง เส้นขอบบาง สีฟ้าอมเขียว ---------- */
  [data-style="luma"] {
    --bg: #fbfdfc; --fg: #0d1a15; --card: #ffffff;
    --muted: #eef4f1; --muted-fg: #4f635d;
    --border: #e0eae6; --input: #7f948c; --ring: #6a877d;
    --sidebar: #f5faf8; --hover: #eaf2ef; --overlay: rgba(13,26,21,.5);
    --shadow-sm: 0 1px 2px rgba(10,40,30,.05);
    --shadow-md: 0 4px 14px rgba(10,40,30,.05);
    --shadow-lg: 0 20px 50px rgba(10,40,30,.18);
  }
  [data-style="luma"][data-theme="dark"] {
    --bg: #08110e; --fg: #f0f7f4; --card: #0d1815;
    --muted: #16241f; --muted-fg: #8ba59c;
    --border: #1d2f28; --input: #55736a; --ring: #7ea296;
    --sidebar: #0a1411; --hover: #16241f; --overlay: rgba(0,0,0,.64);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
    --shadow-md: 0 4px 14px rgba(0,0,0,.5);
    --shadow-lg: 0 20px 50px rgba(0,0,0,1);
  }

  /* ---------- Sera — แน่น ข้อมูลเยอะ เส้นชัด ---------- */
  [data-style="sera"] {
    --bg: #ffffff; --fg: #18181b; --card: #ffffff;
    --muted: #f7f7f8; --muted-fg: #616169;
    --border: #dcdce0; --input: #8a8a92; --ring: #6e6e78;
    --sidebar: #f4f4f5; --hover: #efeff1; --overlay: rgba(24,24,27,.55);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
    --shadow-md: 0 2px 8px rgba(0,0,0,.06);
    --shadow-lg: 0 16px 40px rgba(0,0,0,.20);
  }
  [data-style="sera"][data-theme="dark"] {
    --bg: #0c0c0e; --fg: #f4f4f5; --card: #121215;
    --muted: #1d1d21; --muted-fg: #9d9da5;
    --border: #2e2e34; --input: #64646d; --ring: #8e8e99;
    --sidebar: #131316; --hover: #1d1d21; --overlay: rgba(0,0,0,.66);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
    --shadow-md: 0 2px 8px rgba(0,0,0,.5);
    --shadow-lg: 0 16px 40px rgba(0,0,0,1);
  }

  /* ---------- Rhea — เข้มอบอุ่น เน้นสีทอง ---------- */
  [data-style="rhea"] {
    --bg: #faf9f6; --fg: #1a1712; --card: #ffffff;
    --muted: #f1eee6; --muted-fg: #666253;
    --border: #e3ddce; --input: #948c74; --ring: #837b66;
    --sidebar: #f4f1e9; --hover: #ece8dc; --overlay: rgba(26,23,18,.58);
    --shadow-sm: 0 1px 2px rgba(70,55,20,.07);
    --shadow-md: 0 4px 14px rgba(70,55,20,.08);
    --shadow-lg: 0 20px 50px rgba(70,55,20,.26);
  }
  [data-style="rhea"][data-theme="dark"] {
    --bg: #12100b; --fg: #f7f4ea; --card: #191610;
    --muted: #242016; --muted-fg: #a49d89;
    --border: #332d20; --input: #6b6350; --ring: #9b9179;
    --sidebar: #151209; --hover: #242016; --overlay: rgba(0,0,0,.68);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.55);
    --shadow-md: 0 4px 14px rgba(0,0,0,.55);
    --shadow-lg: 0 20px 50px rgba(0,0,0,1);
  }


  /* ---------- Orion — น้ำเงินกรมท่า ทางการ ราชการ ---------- */
  [data-style="orion"] {
    --bg: #ffffff; --fg: #101828; --card: #ffffff;
    --muted: #eef1f6; --muted-fg: #55607a;
    --border: #dde3ec; --input: #7f8ba1; --ring: #64708a;
    --sidebar: #f4f6fa; --hover: #e8edf5; --overlay: rgba(16,24,40,.55);
    --shadow-sm: 0 1px 2px rgba(16,24,40,.06);
    --shadow-md: 0 4px 14px rgba(16,24,40,.07);
    --shadow-lg: 0 20px 50px rgba(16,24,40,.24);
  }
  [data-style="orion"][data-theme="dark"] {
    --bg: #0a1020; --fg: #eef2fa; --card: #0f1729;
    --muted: #1a2438; --muted-fg: #9aa7c0;
    --border: #223049; --input: #56637d; --ring: #8496b4;
    --sidebar: #0c1322; --hover: #1a2438; --overlay: rgba(0,0,0,.66);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.55);
    --shadow-md: 0 4px 14px rgba(0,0,0,.55);
    --shadow-lg: 0 20px 50px rgba(0,0,0,1);
  }

  /* ---------- Vela — เขียวเข้ม สงบ เหมาะกับงานตรวจสอบ ---------- */
  [data-style="vela"] {
    --bg: #fcfdfb; --fg: #14201a; --card: #ffffff;
    --muted: #eef3ec; --muted-fg: #4f6154;
    --border: #dfe8dc; --input: #7e9182; --ring: #67806e;
    --sidebar: #f4f8f2; --hover: #e9f0e6; --overlay: rgba(20,32,26,.55);
    --shadow-sm: 0 1px 2px rgba(20,45,30,.06);
    --shadow-md: 0 4px 14px rgba(20,45,30,.07);
    --shadow-lg: 0 20px 50px rgba(20,45,30,.22);
  }
  [data-style="vela"][data-theme="dark"] {
    --bg: #0b120d; --fg: #eff5ef; --card: #111a13;
    --muted: #1a251c; --muted-fg: #96a89a;
    --border: #243227; --input: #536d59; --ring: #85a08c;
    --sidebar: #0d150f; --hover: #1a251c; --overlay: rgba(0,0,0,.66);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.55);
    --shadow-md: 0 4px 14px rgba(0,0,0,.55);
    --shadow-lg: 0 20px 50px rgba(0,0,0,1);
  }

  /* ---------- Cygnus — เทาอมฟ้าเข้ม เน้นตารางยาว ---------- */
  [data-style="cygnus"] {
    --bg: #f7f8fa; --fg: #14171f; --card: #ffffff;
    --muted: #eceef3; --muted-fg: #5a6070;
    --border: #dcdfe7; --input: #868c9c; --ring: #6b7183;
    --sidebar: #ffffff; --hover: #e7eaf1; --overlay: rgba(20,23,31,.55);
    --shadow-sm: 0 1px 2px rgba(20,23,31,.05);
    --shadow-md: 0 2px 10px rgba(20,23,31,.07);
    --shadow-lg: 0 18px 44px rgba(20,23,31,.22);
  }
  [data-style="cygnus"][data-theme="dark"] {
    --bg: #101319; --fg: #f1f3f7; --card: #171b23;
    --muted: #1f242e; --muted-fg: #99a0b0;
    --border: #2a303c; --input: #5d6474; --ring: #8b93a5;
    --sidebar: #131720; --hover: #1f242e; --overlay: rgba(0,0,0,.66);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
    --shadow-md: 0 2px 10px rgba(0,0,0,.5);
    --shadow-lg: 0 18px 44px rgba(0,0,0,1);
  }

  /* ---------- Pavo — ชมพูอมม่วงอ่อน ละมุน ---------- */
  [data-style="pavo"] {
    --bg: #fffcfd; --fg: #24151d; --card: #ffffff;
    --muted: #faf0f4; --muted-fg: #6d5560;
    --border: #f2e3ea; --input: #a38994; --ring: #8b6f7c;
    --sidebar: #fdf6f9; --hover: #f7ebf0; --overlay: rgba(36,21,29,.55);
    --shadow-sm: 0 1px 2px rgba(90,30,60,.06);
    --shadow-md: 0 6px 18px rgba(90,30,60,.08);
    --shadow-lg: 0 22px 54px rgba(90,30,60,.24);
  }
  [data-style="pavo"][data-theme="dark"] {
    --bg: #170f13; --fg: #f9f2f5; --card: #1e141a;
    --muted: #2a1d24; --muted-fg: #b09aa4;
    --border: #362630; --input: #7c626e; --ring: #a98d9b;
    --sidebar: #191115; --hover: #2a1d24; --overlay: rgba(0,0,0,.68);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.55);
    --shadow-md: 0 6px 18px rgba(0,0,0,.55);
    --shadow-lg: 0 22px 54px rgba(0,0,0,1);
  }

  /* ---------- Corvus — ดำสนิท ขอบคม โมโนโครม ---------- */
  [data-style="corvus"] {
    --bg: #fafafa; --fg: #0a0a0a; --card: #ffffff;
    --muted: #ededed; --muted-fg: #525252;
    --border: #d4d4d4; --input: #737373; --ring: #404040;
    --sidebar: #f2f2f2; --hover: #e5e5e5; --overlay: rgba(0,0,0,.6);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.07);
    --shadow-md: 0 4px 14px rgba(0,0,0,.09);
    --shadow-lg: 0 20px 50px rgba(0,0,0,.28);
  }
  [data-style="corvus"][data-theme="dark"] {
    --bg: #0a0a0a; --fg: #fafafa; --card: #141414;
    --muted: #1f1f1f; --muted-fg: #a3a3a3;
    --border: #2e2e2e; --input: #666666; --ring: #d4d4d4;
    --sidebar: #000000; --hover: #1f1f1f; --overlay: rgba(0,0,0,.72);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.6);
    --shadow-md: 0 4px 14px rgba(0,0,0,.6);
    --shadow-lg: 0 20px 50px rgba(0,0,0,1);
  }

  /* ---------- Aquila — ฟ้าสดใส โปร่งสบาย ---------- */
  [data-style="aquila"] {
    --bg: #f8fbff; --fg: #0d1b2a; --card: #ffffff;
    --muted: #e9f1fb; --muted-fg: #4f6076;
    --border: #d8e5f4; --input: #7d8ea4; --ring: #5f7590;
    --sidebar: #eef5fd; --hover: #e0ebf8; --overlay: rgba(13,27,42,.5);
    --shadow-sm: 0 1px 2px rgba(20,60,110,.06);
    --shadow-md: 0 4px 16px rgba(20,60,110,.08);
    --shadow-lg: 0 20px 50px rgba(20,60,110,.22);
  }
  [data-style="aquila"][data-theme="dark"] {
    --bg: #071019; --fg: #eaf3fc; --card: #0d1a26;
    --muted: #152736; --muted-fg: #94aac0;
    --border: #1e3448; --input: #52697f; --ring: #86a2bd;
    --sidebar: #091420; --hover: #152736; --overlay: rgba(0,0,0,.66);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
    --shadow-md: 0 4px 16px rgba(0,0,0,.5);
    --shadow-lg: 0 20px 50px rgba(0,0,0,1);
  }

  /* ---------- Draco — ส้มอิฐ อบอุ่นจัด ---------- */
  [data-style="draco"] {
    --bg: #fffaf7; --fg: #241610; --card: #ffffff;
    --muted: #f9eee7; --muted-fg: #6f574a;
    --border: #f0e0d5; --input: #a08672; --ring: #86695a;
    --sidebar: #fcf3ed; --hover: #f6e7dd; --overlay: rgba(36,22,16,.55);
    --shadow-sm: 0 1px 2px rgba(110,50,20,.07);
    --shadow-md: 0 4px 16px rgba(110,50,20,.08);
    --shadow-lg: 0 20px 50px rgba(110,50,20,.24);
  }
  [data-style="draco"][data-theme="dark"] {
    --bg: #16100c; --fg: #faf1eb; --card: #1d1510;
    --muted: #2a1e17; --muted-fg: #b09a8c;
    --border: #382920; --input: #7c6353; --ring: #a68b78;
    --sidebar: #18110d; --hover: #2a1e17; --overlay: rgba(0,0,0,.68);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.55);
    --shadow-md: 0 4px 16px rgba(0,0,0,.55);
    --shadow-lg: 0 20px 50px rgba(0,0,0,1);
  }

  /* ---------- Carina — เทาอบอุ่น เอกสารกระดาษ ---------- */
  [data-style="carina"] {
    --bg: #f6f5f2; --fg: #1f1e1b; --card: #fdfcfa;
    --muted: #eceae4; --muted-fg: #5f5c55;
    --border: #dedbd3; --input: #8b8880; --ring: #6f6c64;
    --sidebar: #efedE7; --hover: #e6e3dc; --overlay: rgba(31,30,27,.55);
    --shadow-sm: 0 1px 2px rgba(50,45,35,.06);
    --shadow-md: 0 3px 12px rgba(50,45,35,.07);
    --shadow-lg: 0 18px 46px rgba(50,45,35,.22);
  }
  [data-style="carina"][data-theme="dark"] {
    --bg: #191816; --fg: #f4f3ef; --card: #201f1c;
    --muted: #2b2926; --muted-fg: #a5a29a;
    --border: #38352f; --input: #6c6960; --ring: #97948b;
    --sidebar: #1c1b18; --hover: #2b2926; --overlay: rgba(0,0,0,.66);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.55);
    --shadow-md: 0 3px 12px rgba(0,0,0,.55);
    --shadow-lg: 0 18px 46px rgba(0,0,0,1);
  }

  /* ---------- semantic colours per mode (shared by all styles) ---------- */
  [data-theme="dark"] {
    --ok-bg: #0d2a20; --ok-fg: #6ee7b7;
    --warn-bg: #2d2410; --warn-fg: #fcd34d;
    --danger-bg: #2d1414; --danger-fg: #fca5a5; --danger: #ef4444;
    --info-bg: #12203b; --info-fg: #93c5fd;
  }

  /* ---------- shape & type presets that ship with each style ---------- */
  [data-style="lyra"] { --radius-sm: 0px; --radius: 0px; --radius-lg: 0px; }
  [data-style="sera"] { --radius-sm: 2px; --radius: 4px; --radius-lg: 6px; }
  [data-style="maia"] { --radius-sm: 4px; --radius: 6px; --radius-lg: 8px; }
  [data-style="nova"], [data-style="rhea"] { --radius-sm: 10px; --radius: 12px; --radius-lg: 16px; }
  [data-style="mira"] { --radius-sm: 12px; --radius: 14px; --radius-lg: 18px; }
  [data-style="luma"], [data-style="aquila"] { --radius-sm: 8px; --radius: 10px; --radius-lg: 14px; }
  [data-style="corvus"] { --radius-sm: 2px; --radius: 3px; --radius-lg: 4px; }
  [data-style="cygnus"] { --radius-sm: 4px; --radius: 6px; --radius-lg: 8px; }
  [data-style="orion"], [data-style="vela"], [data-style="carina"] { --radius-sm: 6px; --radius: 8px; --radius-lg: 10px; }
  [data-style="pavo"], [data-style="draco"] { --radius-sm: 12px; --radius: 14px; --radius-lg: 18px; }
}