/* 178tw 應用平台 — Design Tokens · AI 宇宙風格 (Cosmic)
   一份變數控制深空 / 星晝兩種主題與品牌換色 */

:root {
  /* 星雲強調色（不隨主題改變） */
  --brand:    #283593;   /* 178 品牌深藍紫 */
  --violet:   #7c5cff;   /* 主星光紫 */
  --violet-2: #a78bfa;
  --blue:     #4f6bd8;
  --cyan:     #35e0e6;   /* 電漿青 */
  --gold:     #f0c674;   /* 恆星金 */
  --pink:     #ff6fd8;   /* 星雲粉 */
  --ok:       #3ddc97;
  --danger:   #ff6b6b;

  --grad-cosmic: linear-gradient(135deg, #4f6bd8 0%, #7c5cff 45%, #a78bfa 100%);
  --grad-plasma: linear-gradient(120deg, #35e0e6 0%, #7c5cff 55%, #ff6fd8 100%);
  --grad-gold:   linear-gradient(135deg, #c99a3d, #f5dfae);
  --grad-text:   linear-gradient(100deg, #35e0e6 0%, #a78bfa 40%, #f0c674 90%);

  /* 8pt 間距系統 */
  --s1: 8px;  --s2: 16px;  --s3: 24px;  --s4: 40px;  --s5: 72px;

  /* 圓角 —— 宇宙風格用更大的曲率 */
  --r-card: 22px;
  --r-btn:  14px;
  --r-in:   14px;
  --r-chip: 999px;

  --fs-xs: 12px; --fs-sm: 13.5px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 23px;

  --font-display: "Space Grotesk", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --font: "Noto Sans TC", "Space Grotesk", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Noto Sans Mono CJK TC", monospace;

  --maxw: 1320px;
  --ease: cubic-bezier(.2,.8,.25,1);
}

/* ---------- 深空模式（預設） ---------- */
:root, [data-theme="dark"] {
  --bg:        #04050e;
  --bg-2:      #080a1a;
  --panel:     rgba(19, 23, 48, .88);
  --panel-2:   rgba(30, 36, 72, .90);
  --panel-solid:#11152b;
  --ink:       #edf0ff;
  --muted:     #99a2ca;
  --line:      rgba(150, 165, 255, .15);
  --line-2:    rgba(150, 165, 255, .28);
  --field:     rgba(8, 11, 26, .88);
  --chip-bg:   rgba(28, 34, 68, .82);
  --code-bg:   rgba(4, 6, 18, .82);

  --shadow:    0 28px 80px rgba(0, 0, 0, .55);
  --glow-v:    0 0 0 1px rgba(124, 92, 255, .35), 0 18px 50px rgba(124, 92, 255, .28);
  --glow-c:    0 0 26px rgba(53, 224, 230, .35);

  --star-op: .9;
  --neb-1: radial-gradient(1100px 620px at 12% -8%,  rgba(124, 92, 255, .30), transparent 62%);
  --neb-2: radial-gradient(900px 520px at 92% 4%,   rgba(53, 224, 230, .16), transparent 60%);
  --neb-3: radial-gradient(800px 600px at 50% 108%, rgba(255, 111, 216, .14), transparent 62%);
}

/* ---------- 星晝模式（上課投影 / 列印） ---------- */
[data-theme="light"] {
  --bg:        #eef1fb;
  --bg-2:      #f7f8ff;
  --panel:     rgba(255, 255, 255, .93);
  --panel-2:   rgba(240, 243, 255, .96);
  --panel-solid:#ffffff;
  --ink:       #131734;
  --muted:     #58608a;
  --line:      rgba(60, 75, 160, .16);
  --line-2:    rgba(60, 75, 160, .30);
  --field:     rgba(255, 255, 255, .95);
  --chip-bg:   rgba(238, 241, 255, .96);
  --code-bg:   #0d1128;

  --shadow:    0 22px 54px rgba(45, 60, 140, .14);
  --glow-v:    0 0 0 1px rgba(124, 92, 255, .35), 0 16px 40px rgba(124, 92, 255, .20);
  --glow-c:    0 0 22px rgba(53, 224, 230, .30);

  --star-op: 0;
  --neb-1: radial-gradient(1100px 620px at 12% -8%,  rgba(124, 92, 255, .18), transparent 62%);
  --neb-2: radial-gradient(900px 520px at 92% 4%,   rgba(53, 224, 230, .16), transparent 60%);
  --neb-3: radial-gradient(800px 600px at 50% 108%, rgba(255, 111, 216, .12), transparent 62%);
}