/* ============================================================
   上岸星伴 · 主题令牌（Theme Tokens）
   风格：Bento Grid（便当盒布局）· 暖亮配色
     · 暖白底 + 暖调面板，避免灰扑扑的中性色
     · 鲜亮橙为主强调色，选中态/CTA 用实色橙（不用黑底）
     · 圆角统一 16px / 24px、阴影从紧凑到悬停扩散
     · 禁止紫→蓝渐变、禁止直角、禁止玻璃态
   默认 = 浅色；<html data-theme="dark"> = 深色
   两个页面（index.html / admin.html）共用此文件
   ============================================================ */

:root{
  color-scheme: light;

  /* 底色与面板（暖白 → 暖橙浅底，提亮整体观感） */
  --bg:#fffaf6;
  --panel:#ffffff;
  --panel2:#fff4ec;
  --panel3:#ffe8d8;
  --line:#ffe9db;
  --line-soft:#fff7f1;
  --line-strong:#ffd8c2;

  /* 文字（暖黑，和暖底更配） */
  --text:#1c1917;
  --muted:#78716c;
  --text-dim:#a8a29e;

  /* 主强调色（橙：链接、数字、标签） */
  --gold1:#ea580c;
  --gold2:#f97316;
  --gold-deep:#c2410c;
  --on-gold:#ffffff;

  /* 主按钮 / 选中态（鲜亮实色橙，替代原来的黑底） */
  --cta:#f4581c;
  --cta-hover:#dc4a0d;
  --on-cta:#ffffff;

  /* 语义色 */
  --ok:#16b364;
  --warn:#f59e0b;
  --danger:#ef4444;

  /* 主色/语义色浅底与描边 */
  --gold-bg:rgba(249,115,22,.12);
  --gold-bg-hi:rgba(249,115,22,.18);
  --gold-line:rgba(249,115,22,.30);
  --gold-line-strong:rgba(249,115,22,.50);
  --ok-bg:rgba(22,179,100,.12);
  --ok-line:rgba(22,179,100,.28);
  --warn-bg:rgba(245,158,11,.12);
  --warn-line:rgba(245,158,11,.34);
  --danger-bg:rgba(239,68,68,.10);
  --danger-line:rgba(239,68,68,.28);

  /* 彩色重点卡（Bento 渐变；刻意避开紫→蓝） */
  --grad-warm:linear-gradient(135deg,#ff9147,#ef4e8f);   /* 橙 → 粉  */
  --grad-cool:linear-gradient(135deg,#34d399,#06b6d4);   /* 绿 → 青  */
  --grad-deep:linear-gradient(135deg,#f97316,#e11d74);   /* 深橙 → 玫红 */
  --grad-ink:linear-gradient(135deg,#332e2b,#5b524c);    /* 暖深灰 → 中灰 */
  --on-accent:#ffffff;

  /* 阴影与轨道 */
  --card-top:rgba(255,255,255,0);
  --shadow-card:0 1px 2px 0 rgba(120,60,20,.06);
  --shadow-soft:0 1px 3px 0 rgba(120,60,20,.08),0 1px 2px -1px rgba(120,60,20,.08);
  --shadow-hover:0 8px 30px rgba(120,60,20,.10);
  --shadow-pop:0 10px 15px -3px rgba(120,60,20,.10),0 4px 6px -4px rgba(120,60,20,.08);
  --shadow-modal:0 20px 50px rgba(60,30,10,.20);
  --track:#ffe0cd;
  --cb-border:#f3c8ac;
  --hover-tint:rgba(234,88,12,.05);
  --toast-bg:#1c1917;
  --backdrop:rgba(28,25,23,.45);

  /* 图表 */
  --chart1:#f97316;
  --chart1-soft:rgba(249,115,22,.24);
  --chart1-area1:rgba(249,115,22,.28);
  --chart1-area2:rgba(249,115,22,0);
  --chart2:#06a3c4;
  --chart3:#16b364;
  --chart4:#ec4899;
  --chart5:#f59e0b;
  --grid:#ffe0cd;
  --bar-empty:#fff1e7;

  /* 标签配色 */
  --tag-b1:#0d8bb0;  --tag-b1-bg:rgba(6,163,196,.12);
  --tag-b2:#db2777;  --tag-b2-bg:rgba(236,72,153,.12);

  /* 页面光晕：暖橙 + 一点冷色，让页面透气不发灰 */
  --glow1:rgba(255,138,61,.16);
  --glow2:rgba(56,189,248,.10);

  --radius:16px;          /* rounded-2xl */
  --radius-sm:12px;       /* rounded-xl  */
  --radius-lg:24px;       /* rounded-3xl */
  --radius-pill:999px;

  /* 间距（gap-4 / gap-6 / gap-8） */
  --gap:16px;
  --gap-lg:24px;
  --gap-xl:32px;

  /* 动效（ease-out 200–300ms） */
  --ease:cubic-bezier(.16,1,.3,1);
  --dur:200ms;
}

html[data-theme="dark"]{
  color-scheme: dark;

  --bg:#0f0b09;
  --panel:#1b1512;
  --panel2:#272020;
  --panel3:#3a2f2a;
  --line:rgba(255,255,255,.09);
  --line-soft:rgba(255,255,255,.05);
  --line-strong:#3f3630;

  --text:#fafaf9;
  --muted:#a8a29e;
  --text-dim:#8a8079;

  --gold1:#ffa255;
  --gold2:#fb923c;
  --gold-deep:#ffc08a;
  --on-gold:#1c1917;

  --cta:#fb923c;
  --cta-hover:#f97316;
  --on-cta:#1c1917;

  --ok:#4ade80;
  --warn:#fbbf24;
  --danger:#f87171;

  --gold-bg:rgba(251,146,60,.14);
  --gold-bg-hi:rgba(251,146,60,.22);
  --gold-line:rgba(251,146,60,.30);
  --gold-line-strong:rgba(251,146,60,.52);
  --ok-bg:rgba(74,222,128,.10);
  --ok-line:rgba(74,222,128,.24);
  --warn-bg:rgba(251,191,36,.10);
  --warn-line:rgba(251,191,36,.38);
  --danger-bg:rgba(248,113,113,.10);
  --danger-line:rgba(248,113,113,.28);

  --grad-warm:linear-gradient(135deg,#f97316,#db2777);
  --grad-cool:linear-gradient(135deg,#22c55e,#0891b2);
  --grad-deep:linear-gradient(135deg,#ea580c,#be185d);
  --grad-ink:linear-gradient(135deg,#3a2f2a,#6b5a52);

  --shadow-card:0 1px 2px 0 rgba(0,0,0,.4);
  --shadow-soft:0 1px 3px 0 rgba(0,0,0,.5);
  --shadow-hover:0 8px 30px rgba(0,0,0,.45);
  --shadow-pop:0 10px 15px -3px rgba(0,0,0,.5);
  --shadow-modal:0 20px 60px rgba(0,0,0,.7);
  --track:rgba(255,255,255,.10);
  --cb-border:rgba(255,255,255,.22);
  --hover-tint:rgba(255,255,255,.04);
  --toast-bg:#272020;
  --backdrop:rgba(0,0,0,.68);

  --chart1:#fb923c;
  --chart1-soft:rgba(251,146,60,.26);
  --chart1-area1:rgba(251,146,60,.30);
  --chart1-area2:rgba(251,146,60,0);
  --chart2:#22d3ee;
  --chart3:#4ade80;
  --chart4:#f472b6;
  --chart5:#fbbf24;
  --grid:rgba(255,255,255,.09);
  --bar-empty:rgba(255,255,255,.06);

  --tag-b1:#7dd3fc;  --tag-b1-bg:rgba(34,211,238,.10);
  --tag-b2:#f9a8d4;  --tag-b2-bg:rgba(244,114,182,.10);

  --glow1:rgba(251,146,60,.12);
  --glow2:rgba(56,189,248,.07);
}