/* ==========================================================================
   主题配色

   默认那一套（夜色琥珀）就写在 tokens.css 的 :root 里，这里只放"另外几套"。
   每套都必须给出：三层底色 + 四级字色 + 强调色 + 描边/阴影 + 面板色。

   选色不是随手配的：用的是 ui-ux-pro-max 技能里的调色板数据
     · 霓虹街机 ← "Arcade & Retro Game"（red + blue on dark + score green）
     · 牌桌绿呢 ← "Card & Board Game"（felt green + gold on dark）
     · 纸感暖白 / 清亮蓝白 ← 浅色底上的暖/冷两派，强调色沿用上面两套的色相

   硬规矩（技能的 Accessibility 是第 1 优先级）：正文 4.5:1、11px 小字也不能破。
   小字用的是 --ink-4，所以每套的 --ink-4 都是压着 4.5:1 挑的。
   选择器用 html[data-theme=...]（比 :root 高一级），才能盖过 index.html 里
   内联的启动画面默认色。
   ========================================================================== */

/* -------------------------------------------------- 霓虹街机（深色） */
html[data-theme="arcade"] {
  --shell-0: #0C1428;
  --shell-1: #16203A;
  --shell-2: #1E2B4C;
  --shell-3: #27385F;
  --screen-0: #070B16;
  --screen-1: #0D1322;

  --line: rgba(180, 200, 255, .10);
  --line-strong: rgba(180, 200, 255, .22);
  --line: color-mix(in oklab, #B4C8FF 12%, transparent);
  --line-strong: color-mix(in oklab, #B4C8FF 22%, transparent);

  --ink: #F2F6FF;
  --ink-2: #C3CDE6;
  --ink-3: #97A3C2;
  --ink-4: #8E9AB8;

  --amber: #FF4D6D;
  --amber-hi: #FF7A93;
  --amber-deep: #C01F42;
  --amber-ink: #2A0410;
  --jade: #35D07F;
  --jade-ink: #04200F;
  --red: #FF6B70;
  --red-ink: #2A0508;
  --azure: #5B9BFF;
  --violet: #A78BFA;
  --teal: #3FD0C9;

  --bevel: inset 0 1px 0 rgba(255, 255, 255, .09);
  --drop: 0 10px 24px -14px rgba(0, 0, 0, .95);
  --press-drop: 0 2px 6px -4px rgba(0, 0, 0, .9);
  --well: inset 0 2px 6px rgba(0, 0, 0, .6);

  --bezel-0: #16203A;
  --bezel-1: #0C1428;
  --banner-0: #23315A;
  --banner-1: #16203A;
  --toast-bg: rgba(22, 32, 58, .96);
  --boot-bg: #0C1428;
  --boot-ink: #F2F6FF;
}

/* -------------------------------------------------- 牌桌绿呢（深色） */
html[data-theme="felt"] {
  /* 别做成"看起来还是黑的"：这套的意义就是一眼看出是绿呢。
     所以底色比默认那套整体提亮一档，绿味才出来。 */
  --shell-0: #102A1F;
  --shell-1: #17392A;
  --shell-2: #1F4836;
  --shell-3: #2A5C45;
  --screen-0: #0C2018;
  --screen-1: #122E20;

  --line: rgba(230, 240, 225, .10);
  --line-strong: rgba(230, 240, 225, .22);
  --line: color-mix(in oklab, #E6F0E1 12%, transparent);
  --line-strong: color-mix(in oklab, #E6F0E1 22%, transparent);

  --ink: #F3F1E6;
  --ink-2: #D2D6C6;
  --ink-3: #B4BCA6;
  --ink-4: #AAB89F;

  --amber: #E0A33A;
  --amber-hi: #F0BC62;
  --amber-deep: #A8721C;
  --amber-ink: #1E1204;
  --jade: #34D399;
  --jade-ink: #04241A;
  --red: #EF6B5E;
  --red-ink: #2A0A06;
  --azure: #6EA8FE;
  --violet: #B79CF2;
  --teal: #4FD1C5;

  --bevel: inset 0 1px 0 rgba(255, 255, 255, .08);
  --drop: 0 10px 24px -14px rgba(0, 0, 0, .9);
  --press-drop: 0 2px 6px -4px rgba(0, 0, 0, .85);
  --well: inset 0 2px 6px rgba(0, 0, 0, .5);

  --bezel-0: #17392A;
  --bezel-1: #102A1F;
  --banner-0: #24523C;
  --banner-1: #17392A;
  --toast-bg: rgba(23, 57, 42, .96);
  --boot-bg: #102A1F;
  --boot-ink: #F3F1E6;
}

/* -------------------------------------------------- 纸感暖白（浅色） */
html[data-theme="paper"] {
  --shell-0: #F6F1E7;
  --shell-1: #FFFCF6;
  --shell-2: #F1EADC;
  --shell-3: #E6DCC9;
  --screen-0: #EFE7D8;
  --screen-1: #F7F1E5;

  --line: rgba(58, 46, 32, .14);
  --line-strong: rgba(58, 46, 32, .28);
  --line: color-mix(in oklab, #3A2E20 16%, transparent);
  --line-strong: color-mix(in oklab, #3A2E20 30%, transparent);

  --ink: #241F19;
  --ink-2: #554C41;
  --ink-3: #6D6355;
  --ink-4: #675E51;

  --amber: #D97706;
  --amber-hi: #F0A03C;
  --amber-deep: #A5560A;
  --amber-ink: #2A1602;
  --jade: #0F8A52;
  --jade-ink: #FFFFFF;
  --red: #C0392F;
  --red-ink: #FFFFFF;
  --azure: #1D4ED8;
  --violet: #6D28D9;
  --teal: #0E7490;

  --bevel: inset 0 1px 0 rgba(255, 255, 255, .9);
  --drop: 0 10px 24px -16px rgba(70, 55, 35, .45);
  --press-drop: 0 2px 6px -4px rgba(70, 55, 35, .4);
  --well: inset 0 2px 6px rgba(70, 55, 35, .16);

  --bezel-0: #E7DCC7;
  --bezel-1: #DFD2B9;
  --banner-0: #FFFCF6;
  --banner-1: #F3ECDD;
  --toast-bg: rgba(255, 252, 246, .97);
  --toast-warn-ink: #8A2018;
  --boot-bg: #F6F1E7;
  --boot-ink: #241F19;
}

/* -------------------------------------------------- 清亮蓝白（浅色） */
html[data-theme="sky"] {
  --shell-0: #EEF3FA;
  --shell-1: #FFFFFF;
  --shell-2: #E7EEF8;
  --shell-3: #D9E3F0;
  --screen-0: #E6EDF7;
  --screen-1: #F2F6FB;

  --line: rgba(20, 35, 60, .14);
  --line-strong: rgba(20, 35, 60, .28);
  --line: color-mix(in oklab, #14233C 16%, transparent);
  --line-strong: color-mix(in oklab, #14233C 30%, transparent);

  --ink: #101A2B;
  --ink-2: #4A566B;
  --ink-3: #5F6B80;
  --ink-4: #5C677C;

  --amber: #2563EB;
  --amber-hi: #4F86F7;
  --amber-deep: #1A47A8;
  --amber-ink: #FFFFFF;
  --jade: #0E9F6E;
  --jade-ink: #FFFFFF;
  --red: #D33B31;
  --red-ink: #FFFFFF;
  --azure: #1D4ED8;
  --violet: #7C3AED;
  --teal: #0D7490;

  --bevel: inset 0 1px 0 rgba(255, 255, 255, .95);
  --drop: 0 10px 24px -16px rgba(30, 45, 75, .35);
  --press-drop: 0 2px 6px -4px rgba(30, 45, 75, .3);
  --well: inset 0 2px 6px rgba(30, 45, 75, .14);

  --bezel-0: #E3EAF5;
  --bezel-1: #DAE3F1;
  --banner-0: #FFFFFF;
  --banner-1: #EFF4FB;
  --toast-bg: rgba(255, 255, 255, .97);
  --toast-warn-ink: #8A2018;
  --boot-bg: #EEF3FA;
  --boot-ink: #101A2B;
}

/* 浅色主题下的"高对比"要往深里走，不能照搬深色那套"更亮"。
   （app.css 里的 :root[data-contrast="high"] 只对深色主题成立。） */
html[data-theme="paper"][data-contrast="high"],
html[data-theme="sky"][data-contrast="high"] {
  --ink: #000000;
  --ink-2: #332C24;
  --ink-3: #3E372E;
  --ink-4: #3E372E;
  --line: rgba(20, 20, 20, .42);
  --line-strong: rgba(20, 20, 20, .62);
}