/* Packling 天空主题 · v1.0.0
 * 用法：在 <html> 或页面根节点上设置 data-theme="dawn|dusk|sea|rain|planes"，默认 planes。
 * 每个主题的天空背景图在 sky/ 目录，对应变量 --pk-sky-image。
 */

:root {
  --pk-paper: #FFFFFF;
  --pk-warn-bg: #FBEBD3;
  --pk-warn-text: #8A5410;
  --pk-font-sans: 'Noto Sans SC', system-ui, -apple-system, sans-serif;
  --pk-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --pk-radius-card: 20px;
  --pk-radius-sheet: 28px;
  --pk-radius-button: 14px;
  --pk-radius-nav: 22px;
  --pk-radius-chip: 18px;
}

/* F1 晨光 */
[data-theme="dawn"] {
  --pk-theme-name: "晨光";
  --pk-sky: #F9DCCB;
  --pk-sky-low: #F6C9B3;
  --pk-ink: #3A2233;
  --pk-ink-sub: #6B4A58;
  --pk-btn-on-sky: rgba(255,255,255,0.7);
  --pk-card-ink: #3A2233;
  --pk-text-sub: #6E5560;
  --pk-primary: #3A2233;
  --pk-on-primary: #FFFFFF;
  --pk-cta: #B4452F;
  --pk-on-cta: #FFFFFF;
  --pk-accent: #E8664A;
  --pk-soft: #FBEDE6;
  --pk-on-soft: #8A3B2A;
  --pk-line: #F0E4DE;
  --pk-nav: #3A2233;
  --pk-nav-on: #FFFFFF;
  --pk-on-nav-on: #3A2233;
  --pk-nav-text: #F3DDE2;
  --pk-sky-image: url("sky/dawn.svg");
}

/* F2 黄昏 */
[data-theme="dusk"] {
  --pk-theme-name: "黄昏";
  --pk-sky: #F4A672;
  --pk-sky-low: #E9845E;
  --pk-ink: #2A1A2E;
  --pk-ink-sub: #4E2F38;
  --pk-btn-on-sky: rgba(255,255,255,0.6);
  --pk-card-ink: #2A1A2E;
  --pk-text-sub: #5E4A5C;
  --pk-primary: #2A1A2E;
  --pk-on-primary: #FFFFFF;
  --pk-cta: #6A3F93;
  --pk-on-cta: #FFFFFF;
  --pk-accent: #7A4FA3;
  --pk-soft: #F3ECF7;
  --pk-on-soft: #5B347D;
  --pk-line: #EEE6EF;
  --pk-nav: #2A1A2E;
  --pk-nav-on: #F4A672;
  --pk-on-nav-on: #2A1A2E;
  --pk-nav-text: #F7DCCB;
  --pk-sky-image: url("sky/dusk.svg");
}

/* F3 云海之上 */
[data-theme="sea"] {
  --pk-theme-name: "云海之上";
  --pk-sky: #2E5C9A;
  --pk-sky-low: #4A79B5;
  --pk-ink: #FFFFFF;
  --pk-ink-sub: #D2E2F5;
  --pk-btn-on-sky: rgba(255,255,255,0.18);
  --pk-card-ink: #163A6B;
  --pk-text-sub: #4A6382;
  --pk-primary: #163A6B;
  --pk-on-primary: #FFFFFF;
  --pk-cta: #F2A93B;
  --pk-on-cta: #163A6B;
  --pk-accent: #F2A93B;
  --pk-soft: #E8EFF8;
  --pk-on-soft: #1E4A80;
  --pk-line: #E3EAF3;
  --pk-nav: #FFFFFF;
  --pk-nav-on: #163A6B;
  --pk-on-nav-on: #FFFFFF;
  --pk-nav-text: #3B5576;
  --pk-sky-image: url("sky/sea.svg");
}

/* F4 伦敦小雨 */
[data-theme="rain"] {
  --pk-theme-name: "伦敦小雨";
  --pk-sky: #D7E0E8;
  --pk-sky-low: #C9D4DE;
  --pk-ink: #1F2E3D;
  --pk-ink-sub: #4A5B6C;
  --pk-btn-on-sky: rgba(255,255,255,0.7);
  --pk-card-ink: #1F2E3D;
  --pk-text-sub: #52606E;
  --pk-primary: #1F2E3D;
  --pk-on-primary: #FFFFFF;
  --pk-cta: #C23B2F;
  --pk-on-cta: #FFFFFF;
  --pk-accent: #D9483B;
  --pk-soft: #EDF1F5;
  --pk-on-soft: #1F2E3D;
  --pk-line: #E4E9EE;
  --pk-nav: #1F2E3D;
  --pk-nav-on: #FFFFFF;
  --pk-on-nav-on: #1F2E3D;
  --pk-nav-text: #D7E0E8;
  --pk-sky-image: url("sky/rain.svg");
}

/* F5 纸飞机 */
html:not([data-theme]),
[data-theme="planes"] {
  --pk-theme-name: "纸飞机";
  --pk-sky: #CFE6F5;
  --pk-sky-low: #BFDDF1;
  --pk-ink: #1D3550;
  --pk-ink-sub: #3D5A78;
  --pk-btn-on-sky: rgba(255,255,255,0.75);
  --pk-card-ink: #1D3550;
  --pk-text-sub: #4F6680;
  --pk-primary: #1D3550;
  --pk-on-primary: #FFFFFF;
  --pk-cta: #C2410C;
  --pk-on-cta: #FFFFFF;
  --pk-accent: #E8590C;
  --pk-soft: #EAF3FA;
  --pk-on-soft: #1D3550;
  --pk-line: #E2ECF4;
  --pk-nav: #1D3550;
  --pk-nav-on: #FFFFFF;
  --pk-on-nav-on: #1D3550;
  --pk-nav-text: #D5E7F4;
  --pk-sky-image: url("sky/planes.svg");
}

/* 常用组件示例 */
.pk-page { background: var(--pk-sky) var(--pk-sky-image) top center / 100% auto no-repeat; color: var(--pk-ink); font-family: var(--pk-font-sans); }
.pk-sheet { background: var(--pk-paper); color: var(--pk-card-ink); border-radius: var(--pk-radius-sheet) var(--pk-radius-sheet) 0 0; }
.pk-btn { background: var(--pk-primary); color: var(--pk-on-primary); border: 0; border-radius: var(--pk-radius-button); min-height: 48px; font-weight: 700; }
.pk-btn-cta { background: var(--pk-cta); color: var(--pk-on-cta); }
.pk-chip { background: var(--pk-soft); color: var(--pk-on-soft); border-radius: var(--pk-radius-chip); }
.pk-tag-warn { background: var(--pk-warn-bg); color: var(--pk-warn-text); }
.pk-nav { background: var(--pk-nav); color: var(--pk-nav-text); border-radius: var(--pk-radius-nav); }
.pk-nav [aria-current="page"] { background: var(--pk-nav-on); color: var(--pk-on-nav-on); }
.pk-sheet input[type="checkbox"] { accent-color: var(--pk-primary); }
.pk-sheet hr, .pk-row { border-color: var(--pk-line); }