/* ══════════════════════════════════════════════════════════
   主题：Parchment（羊皮纸 · 水晶蓝 · 鎏金）
   取色自奇幻 RPG 风格：米黄纸面 / 木质描边 / 蓝水晶主色 / 金色点缀
   ══════════════════════════════════════════════════════════ */

:root{
  /* ── 纸面层次：暖米黄，不是纯白 ── */
  --ui-bg-page:           #f2e6cc;   /* 羊皮纸底 */
  --ui-bg-elevated:       #fdf9ef;   /* 卡片 / 浮层，近奶油白 */
  --ui-bg-soft:           #f7eeda;
  --ui-bg-muted:          #ebdfc4;
  --ui-bg-overlay:        #fdf9efd9;
  --ui-bg-overlay-strong: #fdf9efee;

  /* ── 描边：木质棕的半透明，比灰色边框暖得多 ── */
  --ui-border:            #8b6b4530;
  --ui-border-strong:      #8b6b4560;

  /* ── 文字：暖褐黑，避免纯黑打断纸感 ── */
  --ui-text-primary:      #3d2e1f;
  --ui-text-secondary:    #6b5641;
  --ui-text-muted:        #96836b;
  --ui-text-on-accent:    #ffffff;

  /* ── 主色：水晶蓝 ── */
  --ui-accent:            #3d8fcc;
  --ui-accent-hover:      #2f78b0;
  --ui-accent-soft:       #3d8fcc26;
  --ui-focus-ring:        #3d8fcc45;

  /* ── 次级：鎏金 ── */
  --ui-accent-warm:       #d9a441;
  --ui-accent-warm-hover: #bf8a2c;
  --ui-accent-warm-soft:  #d9a44128;

  /* ── 状态色：都往暖里偏一点，融进纸面 ── */
  --ui-success:           #4f8f5f;
  --ui-success-soft:      #4f8f5f24;
  --ui-warning:           #c98f2e;
  --ui-warning-soft:      #c98f2e26;
  --ui-danger:            #c0392b;
  --ui-danger-soft:       #c0392b24;
  --ui-info:              #4a9fd8;
  --ui-info-soft:         #4a9fd824;

  /* ── 价格：稿子里价格是醒目的砖红 ── */
  --ui-price-primary:     #c0392b;
  --ui-price-promotion:   #c0392b;
  --ui-price-original:    #96836b;

  /* ── 圆角：稿子里卡片偏圆润 ── */
  --ui-radius-sm:         .625rem;
  --ui-radius-md:         .875rem;
  --ui-radius-lg:         1.125rem;
  --ui-radius-xl:         1.5rem;

  /* ── 阴影：褐色调而非中性黑，这一步最能拉出纸感 ── */
  --ui-shadow-1:          0 10px 24px -18px #5c443066;
  --ui-shadow-2:          0 18px 38px -24px #5c443073;
  --ui-shadow-3:          0 30px 64px -34px #5c443080;
  --ui-shadow-soft:       0 12px 30px -24px #5c44306b;
  --ui-shadow-card:       0 20px 46px -30px #5c44307d;

  /* ── 卡片粗边框（RPG 描边感）── */
  --ui-card-border:       #a1734b;
  --ui-card-border-w:     3px;

  /* ── Tailwind 原色兜底（站内 36 处直接用了原色工具类）── */
  --color-blue-600:       #3d8fcc;
  --color-blue-700:       #2f78b0;
  --color-indigo-500:     #4a9fd8;
  --color-indigo-600:     #3d8fcc;
  --color-amber-500:      #d9a441;
  --color-amber-600:      #bf8a2c;
  --color-emerald-500:    #4f8f5f;
  --color-rose-500:       #c0392b;
}


.dark{
  /* 夜晚酒馆：深褐而非纯黑，保持木质感 */
  --ui-bg-page:           #191310;
  --ui-bg-elevated:       #261d17;
  --ui-bg-soft:           #33271e;
  --ui-bg-muted:          #2c2119;
  --ui-bg-overlay:        #261d17cc;
  --ui-bg-overlay-strong: #261d17ee;

  --ui-border:            #d9a44124;
  --ui-border-strong:     #d9a44140;

  --ui-text-primary:      #f2e6d2;
  --ui-text-secondary:    #d4c3a8;
  --ui-text-muted:        #9a8b74;
  --ui-text-on-accent:    #f7f2e8;

  --ui-accent:            #6bb8e8;
  --ui-accent-hover:      #94cdf2;
  --ui-accent-soft:       #6bb8e838;
  --ui-focus-ring:        #6bb8e852;

  --ui-accent-warm:       #e8bc5e;
  --ui-accent-warm-hover: #f2d089;
  --ui-accent-warm-soft:  #e8bc5e38;

  --ui-success:           #6bbf7e;
  --ui-success-soft:      #6bbf7e33;
  --ui-warning:           #e8bc5e;
  --ui-warning-soft:      #e8bc5e33;
  --ui-danger:            #e8695c;
  --ui-danger-soft:       #e8695c33;
  --ui-info:              #6bb8e8;
  --ui-info-soft:         #6bb8e833;

  --ui-price-primary:     #f2e6d2;
  --ui-price-promotion:   #f08a7e;
  --ui-price-original:    #9a8b74;

  --ui-card-border:       #6b5136;

  --ui-shadow-1:          0 14px 30px -22px #000000c4;
  --ui-shadow-2:          0 24px 48px -28px #000000d1;
  --ui-shadow-3:          0 36px 76px -34px #000000db;
  --ui-shadow-soft:       0 22px 46px -30px #000000d1;
  --ui-shadow-card:       0 28px 62px -34px #000000e0;

  --color-blue-600:       #6bb8e8;
  --color-blue-700:       #94cdf2;
  --color-indigo-500:     #6bb8e8;
  --color-indigo-600:     #94cdf2;
  --color-amber-500:      #e8bc5e;
  --color-amber-600:      #f2d089;
  --color-emerald-500:    #6bbf7e;
  --color-rose-500:       #e8695c;
}


/* ══════ 第 2 层：语义类微调（只改外观，不碰布局）══════ */

/* logo 图标框去掉阴影边框背景 */
.theme-wordmark-icon-frame{
  box-shadow: none;
  border: none;
  background: none;
}

/* 分隔线换成金色渐隐，更贴合稿子里的装饰线 */
.theme-section-divider{
  background: linear-gradient(to right, transparent, var(--ui-accent-warm), transparent);
  opacity: .55;
}


/* ══════ 卡片粗边框 ══════
   站内卡片统一用 shadcn 的基础串：
     "rounded-xl border bg-card text-card-foreground shadow"
   .bg-card 是设计系统的语义 token（不是 .bg-blue-600 那种原色工具类），
   相对稳定，可以作为钩子。
   box-sizing 是 border-box，加粗边框不改变卡片外尺寸，只吃掉 2px 内容区。 */

.bg-card{
  border-color: var(--ui-card-border);
  border-width: var(--ui-card-border-w);
  box-shadow:   var(--ui-shadow-2);
}

/* 悬停时描边加深，做出"可点"的手感 */
.bg-card:hover{
  border-color: var(--ui-accent-warm);
}


/* ── 可选：让卡片顶部图片贴合圆角 ──────────────────────
   稿子里图片是齐边裁进圆角的，需要卡片裁剪溢出。
   ⚠️ overflow 属于布局属性，是本文件唯一越线的一条：
      如果发现卡片内的下拉菜单（价格旁那个 ⌄）被裁掉了，
      把这一段删掉即可，其余样式不受影响。

.bg-card{ overflow: hidden; }
*/


/* ══════ 纹理钩子（等你提供图片后再启用）══════
   CSP 是 img-src 'self'，外链图会被拦，
   所以纹理图要么内联成 data URI，要么让 Worker 在同源路径吐出来。

body{
  background-image: url("/__assets/parchment.png");
  background-size: 512px;
  background-repeat: repeat;
}
*/