/* ==========================================================================
   北美万事屋 USWSW —— 多套界面配色（皮肤）
   默认皮肤「活力暖阳」的令牌写在 brand-uswsw.css 的 :root 与暗色块里；
   本文件只补充另外两套：经典深蓝、清新青绿，以及顶部切换器组件。
   切换器与暗色模式共用 data-* 属性：data-skin 决定色板，data-theme 决定明暗。
   ========================================================================== */

/* ---------- 1. 顶部切换器组件 ---------- */
.skin-switch { position: relative; display: inline-flex; }

.skin-switch__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 9px;
  border: 1px solid rgba(255, 249, 241, .2);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .08);
  color: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.skin-switch__btn:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 249, 241, .34); }
.skin-switch__btn svg { width: 12px; height: 12px; opacity: .7; }

.skin-switch__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
  background: linear-gradient(135deg, var(--accent-500) 0 55%, var(--gold-400) 55%);
  box-shadow: 0 0 0 2px rgba(255, 249, 241, .28);
}
html[data-skin="classic"] .skin-switch__dot {
  background: linear-gradient(135deg, #1A237E 0 55%, #FF6F00 55%);
}
html[data-skin="fresh"] .skin-switch__dot {
  background: linear-gradient(135deg, #146455 0 55%, #F5A63A 55%);
}

.skin-switch__panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 130;
  width: 264px;
  padding: 10px;
  background: var(--paper);
  color: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-4);
}
.skin-switch__panel[hidden] { display: none; }

.skin-switch__title {
  margin: 0 0 6px;
  padding: 4px 8px 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ink-400);
  text-transform: uppercase;
}

.skin-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: none;
  color: var(--ink-700);
  text-align: left;
}
.skin-option:hover { background: var(--paper-2); }
.skin-option[aria-pressed="true"] { background: var(--accent-50); border-color: var(--accent-100); }
.skin-option::after {
  content: "✓";
  margin-left: auto;
  font-size: 14px;
  font-weight: 800;
  color: var(--accent-600);
  opacity: 0;
}
.skin-option[aria-pressed="true"]::after { opacity: 1; }

.skin-option__swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 0 1px var(--line), 0 2px 6px rgba(20, 22, 31, .12);
}
.skin-option__swatch--huoli {
  background: conic-gradient(from 210deg, #F2542D 0 40%, #FFC857 0 70%, #FFF9F1 0 100%);
}
.skin-option__swatch--classic {
  background: conic-gradient(from 210deg, #1A237E 0 48%, #FF6F00 0 72%, #F7F8FC 0 100%);
}
.skin-option__swatch--fresh {
  background: conic-gradient(from 210deg, #146455 0 45%, #F5A63A 0 70%, #F5FAF7 0 100%);
}

.skin-option__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.skin-option__text strong { font-size: 13.5px; font-weight: 700; color: var(--ink-900); }
.skin-option__text small { font-size: 11.5px; line-height: 1.4; color: var(--ink-500); }

/* 移动端顶部条是横向滚动区，面板会被裁切，改用抽屉里的色板按钮 */
@media (max-width: 900px) {
  .skin-switch { display: none; }
}

.skin-chip[aria-pressed="true"] {
  background: var(--brand-surface);
  border-color: var(--brand-surface);
  color: var(--brand-surface-fg);
}
.skin-chip[aria-pressed="true"]:hover { color: var(--brand-surface-fg); }

/* ---------- 1.5 皮肤内的品牌标 / 深色面按钮 ---------- */

/* 品牌标只换底色与屋檐门窗，房子轮廓不变，保证三套皮肤都能一眼认出。 */
html[data-skin="classic"] .brand__mark .mark__bg-a { stop-color: #7986CB; }
html[data-skin="classic"] .brand__mark .mark__bg-b { stop-color: #283593; }
html[data-skin="classic"] .brand__mark .mark__house { fill: #F5F7FF; }
html[data-skin="classic"] .brand__mark .mark__roof { stroke: var(--gold-400); }
html[data-skin="classic"] .brand__mark .mark__win { fill: var(--gold-400); }
html[data-skin="classic"] .brand__mark .mark__door { fill: #0F1547; }

html[data-skin="fresh"] .brand__mark .mark__bg-a { stop-color: #4FD1B5; }
html[data-skin="fresh"] .brand__mark .mark__bg-b { stop-color: #1A7A67; }
html[data-skin="fresh"] .brand__mark .mark__house { fill: #FFFDF5; }
html[data-skin="fresh"] .brand__mark .mark__roof { stroke: var(--gold-400); }
html[data-skin="fresh"] .brand__mark .mark__win { fill: var(--gold-400); }
html[data-skin="fresh"] .brand__mark .mark__door { fill: #0B3B33; }

/* 页脚是深色面：给深色底标加一圈细描边，冷色皮肤下也能看出圆角轮廓。 */
html[data-skin="classic"] .site-footer .brand__mark .mark__bg,
html[data-skin="fresh"] .site-footer .brand__mark .mark__bg {
  stroke: rgba(255, 255, 255, .22);
  stroke-width: 1.2;
}

/* 页脚与广告条上的行动按钮改用本套皮肤的行动色，文字取同套深色，既醒目又可读。 */
.site-footer .btn--gold,
.ad-banner .btn--gold {
  background: linear-gradient(135deg, var(--accent-surface-1), var(--accent-surface-2));
  color: var(--gold-surface-fg);
  box-shadow: var(--sh-accent);
}
.site-footer .btn--gold:hover,
.ad-banner .btn--gold:hover {
  filter: brightness(1.06);
}

/* ---------- 2. 经典深蓝（品牌原色） ---------- */
html[data-skin="classic"] {
  --brand-950: #0A0E33;
  --brand-900: #0F1547;
  --brand-800: #1A237E;
  --brand-700: #283593;
  --brand-600: #3949AB;
  --brand-500: #5C6BC0;
  --brand-200: #C5CAE9;
  --brand-100: #E8EAF6;
  --brand-50: #F4F5FC;

  --accent-700: #C43E00;
  --accent-600: #E65100;
  --accent-500: #FF6F00;
  --accent-400: #FF8F00;
  --accent-100: #FFF3E0;
  --accent-50: #FFF8F1;

  --gold-700: #C88A00;
  --gold-600: #F9A825;
  --gold-400: #FFD54F;
  --gold-100: #FFF6DC;

  --ink-900: #14161F;
  --ink-800: #22252F;
  --ink-700: #33374A;
  --ink-600: #4C5165;
  --ink-500: #6B7089;
  --ink-400: #8C91A8;
  --ink-300: #A7ABC0;
  --line-strong: #D5D9E8;
  --line: #E3E5F0;
  --line-soft: #EEF0F7;
  --paper: #FFFFFF;
  --paper-2: #F7F8FC;
  --paper-3: #F1F3FA;

  --brand-deep-950: #0A0E33;
  --brand-deep-900: #0F1547;
  --brand-deep-800: #1A237E;
  --brand-deep-700: #283593;
  --brand-deep-600: #3949AB;
  --brand-surface: #1A237E;
  --brand-surface-hover: #283593;
  --brand-surface-fg: #FFFFFF;
  --brand-surface-fg-soft: #C5CAE9;
  --accent-surface-1: #FF8F00;
  --accent-surface-2: #E65100;
  --gold-surface-1: #FFF6DC;
  --gold-surface-2: #FFD54F;
  --gold-surface-fg: #0F1547;
  --gold-surface-fg-soft: #6B4A00;
  --solid-ink: #14161F;
  --solid-ink-soft: #22252F;
  --on-brand-soft: rgba(255, 255, 255, .92);
  --elevated: #FFFFFF;
  --elevated-blur: rgba(255, 255, 255, .97);
  --scrim-photo: rgba(255, 255, 255, .92);
  --overlay: rgba(15, 21, 71, .44);
  --tint-info-border: #BBDEFB;
  --tint-info-fg: #01579B;
  --tint-jade-border: #B7DFCE;
  --tint-danger-border: #F3C6C6;

  /* 更紧凑的圆角与冷色阴影：偏「专业、可信」 */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --sh-1: 0 1px 2px rgba(20, 22, 31, .06), 0 1px 1px rgba(20, 22, 31, .04);
  --sh-2: 0 2px 8px rgba(20, 22, 31, .07), 0 1px 2px rgba(20, 22, 31, .04);
  --sh-3: 0 8px 24px rgba(20, 22, 31, .09), 0 2px 6px rgba(20, 22, 31, .05);
  --sh-4: 0 18px 48px rgba(15, 21, 71, .16);
  --sh-brand: 0 8px 22px rgba(26, 35, 126, .22);
  --sh-accent: 0 8px 22px rgba(255, 111, 0, .26);

  --page-glow-1: rgba(57, 73, 171, .07);
  --page-glow-2: rgba(255, 111, 0, .05);
  --footer-bg: linear-gradient(160deg, #080C2B 0%, #101743 55%, #1A237E 100%);
  --rail-head-bg: linear-gradient(135deg, #FFF6DC, #F1F3FA);
  --banner-glow: rgba(255, 193, 7, .20);
  --rail-head-fg: #0F1547;

  --hero-bg:
    radial-gradient(760px 420px at 88% -12%, rgba(255, 213, 79, .16), transparent 64%),
    linear-gradient(135deg, #0F1547 0%, #1A237E 52%, #283593 100%);
  --hero-ink: #FFFFFF;
  --hero-muted: rgba(255, 255, 255, .78);
  --hero-accent: #FFD54F;
  --hero-highlight: rgba(255, 213, 79, .22);
  --hero-dot: rgba(255, 255, 255, .08);
  --hero-eyebrow-bg: rgba(255, 255, 255, .12);
  --hero-eyebrow-border: rgba(255, 213, 79, .32);
  --hero-eyebrow-fg: #FFD54F;
  --hero-aside-bg: rgba(255, 255, 255, .08);
  --hero-aside-border: rgba(255, 255, 255, .18);
  --hero-aside-shadow: 0 20px 46px rgba(0, 0, 0, .28);
  --hero-stat: #FFFFFF;
  --hero-stat-label: rgba(255, 255, 255, .62);
  --hero-list: rgba(255, 255, 255, .84);
}

html[data-skin="classic"][data-theme="dark"] {
  --ink-900: #EEF1F8;
  --ink-800: #E3E7F2;
  --ink-700: #CDD3E4;
  --ink-600: #AEB6CB;
  --ink-500: #9099B0;
  --ink-400: #737C94;
  --ink-300: #5A6278;
  --line-strong: #333B52;
  --line: #272E42;
  --line-soft: #1F2536;
  --paper: #161B2A;
  --paper-2: #0E1220;
  --paper-3: #1D2436;

  --brand-900: #DCE3FF;
  --brand-800: #C3CDFF;
  --brand-700: #A4B1F5;
  --brand-600: #8A99EA;
  --brand-500: #7180D6;
  --brand-200: #2F3862;
  --brand-100: #232A4C;
  --brand-50: #1A2038;

  --brand-surface: #3949AB;
  --brand-surface-hover: #4A5BC4;
  --brand-surface-fg: #FFFFFF;
  --brand-surface-fg-soft: rgba(255, 255, 255, .78);

  --accent-700: #FFC08A;
  --accent-600: #FFA45C;
  --accent-100: #3A2614;
  --accent-50: #2A1B10;
  --gold-700: #FFD98A;
  --gold-100: #3A2E10;

  --elevated: #1D2436;
  --elevated-blur: rgba(22, 27, 42, .94);
  --scrim-photo: rgba(22, 27, 42, .86);
  --overlay: rgba(0, 0, 0, .64);
  --sh-1: 0 1px 2px rgba(0, 0, 0, .5);
  --sh-2: 0 2px 10px rgba(0, 0, 0, .45);
  --sh-3: 0 10px 26px rgba(0, 0, 0, .5);
  --sh-4: 0 20px 50px rgba(0, 0, 0, .6);

  --page-glow-1: rgba(92, 107, 192, .10);
  --page-glow-2: rgba(255, 111, 0, .06);
  --footer-bg: linear-gradient(160deg, #05081F 0%, #0B1030 58%, #151C4A 100%);
  --rail-head-bg: linear-gradient(135deg, #232A4C, #2F3862);
  --rail-head-fg: #C3CDFF;

  --hero-bg:
    radial-gradient(700px 400px at 88% -12%, rgba(255, 213, 79, .10), transparent 64%),
    linear-gradient(135deg, #080C2B 0%, #101743 52%, #1A237E 100%);
  --hero-ink: #FFFFFF;
  --hero-muted: rgba(255, 255, 255, .76);
  --hero-accent: #FFD54F;
  --hero-highlight: rgba(255, 213, 79, .20);
  --hero-dot: rgba(255, 255, 255, .07);
  --hero-eyebrow-bg: rgba(255, 255, 255, .10);
  --hero-eyebrow-border: rgba(255, 213, 79, .30);
  --hero-eyebrow-fg: #FFD54F;
  --hero-aside-bg: rgba(255, 255, 255, .07);
  --hero-aside-border: rgba(255, 255, 255, .16);
  --hero-aside-shadow: 0 20px 46px rgba(0, 0, 0, .5);
  --hero-stat: #FFFFFF;
  --hero-stat-label: rgba(255, 255, 255, .58);
  --hero-list: rgba(255, 255, 255, .82);
}

/* ---------- 3. 清新青绿 ---------- */
html[data-skin="fresh"] {
  --brand-950: #06302A;
  --brand-900: #0B3B33;
  --brand-800: #0F4F43;
  --brand-700: #146455;
  --brand-600: #1A7A67;
  --brand-500: #2A957D;
  --brand-200: #CDE9DF;
  --brand-100: #E4F4ED;
  --brand-50: #F1FAF6;

  --accent-700: #A85A08;
  --accent-600: #C96E0A;
  --accent-500: #E8890F;
  --accent-400: #F5A63A;
  --accent-100: #FDF0DC;
  --accent-50: #FFF7EA;

  --gold-700: #B08200;
  --gold-600: #E0AC1C;
  --gold-400: #FFD166;
  --gold-100: #FFF6DA;

  --ink-900: #12211B;
  --ink-800: #1B2E26;
  --ink-700: #31463C;
  --ink-600: #4C6357;
  --ink-500: #6B8377;
  --ink-400: #8AA096;
  --ink-300: #AEC0B7;
  --line-strong: #D2E5DC;
  --line: #E0EFE8;
  --line-soft: #ECF6F1;
  --paper: #FFFFFF;
  --paper-2: #F5FAF7;
  --paper-3: #E8F3EE;

  --brand-deep-950: #06302A;
  --brand-deep-900: #0B3B33;
  --brand-deep-800: #0F4F43;
  --brand-deep-700: #146455;
  --brand-deep-600: #1A7A67;
  --brand-surface: #146455;
  --brand-surface-hover: #1A7A67;
  --brand-surface-fg: #F4FBF8;
  --brand-surface-fg-soft: #CDE9DF;
  --accent-surface-1: #F5A63A;
  --accent-surface-2: #D97706;
  --gold-surface-1: #FFF6DA;
  --gold-surface-2: #FFD166;
  --gold-surface-fg: #0B3B33;
  --gold-surface-fg-soft: #6B4A00;
  --solid-ink: #1B2E26;
  --solid-ink-soft: #31463C;
  --on-brand-soft: rgba(255, 255, 255, .92);
  --elevated: #FFFFFF;
  --elevated-blur: rgba(255, 255, 255, .97);
  --scrim-photo: rgba(255, 255, 255, .94);
  --overlay: rgba(11, 59, 51, .46);
  --tint-info-border: #CBE2F6;
  --tint-info-fg: #0F4F86;
  --tint-jade-border: #B7DFCE;
  --tint-danger-border: #F4CDC5;

  /* 更圆润的卡片：偏「轻松、生活感」 */
  --r-xs: 8px;
  --r-sm: 11px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --sh-1: 0 1px 2px rgba(15, 79, 67, .05), 0 1px 1px rgba(15, 79, 67, .04);
  --sh-2: 0 2px 10px rgba(15, 79, 67, .07), 0 1px 2px rgba(15, 79, 67, .04);
  --sh-3: 0 10px 26px rgba(15, 79, 67, .10), 0 2px 6px rgba(15, 79, 67, .05);
  --sh-4: 0 20px 50px rgba(6, 48, 42, .16);
  --sh-brand: 0 10px 24px rgba(20, 100, 85, .24);
  --sh-accent: 0 10px 24px rgba(232, 137, 15, .26);

  --page-glow-1: rgba(255, 209, 102, .14);
  --page-glow-2: rgba(26, 122, 103, .06);
  --footer-bg: linear-gradient(160deg, #06302A 0%, #0B3B33 55%, #0F4F43 100%);
  --banner-glow: rgba(255, 209, 102, .18);

  --hero-bg:
    radial-gradient(760px 420px at 88% -12%, rgba(255, 209, 102, .55), transparent 64%),
    radial-gradient(620px 380px at 6% 0%, rgba(26, 122, 103, .14), transparent 62%),
    linear-gradient(168deg, #FBFEFC 0%, #EDF8F2 52%, #DCEFE6 100%);
  --hero-ink: #0B3B33;
  --hero-muted: #40685C;
  --hero-accent: #C96E0A;
  --hero-highlight: rgba(255, 209, 102, .62);
  --hero-dot: rgba(15, 79, 67, .10);
  --hero-eyebrow-bg: rgba(255, 255, 255, .8);
  --hero-eyebrow-border: rgba(26, 122, 103, .24);
  --hero-eyebrow-fg: #0F5C4A;
  --hero-aside-bg: #FFFFFF;
  --hero-aside-border: #DFF0E8;
  --hero-aside-shadow: 0 20px 46px rgba(15, 79, 67, .14);
  --hero-stat: #0B3B33;
  --hero-stat-label: #638073;
  --hero-list: #31463C;
}

html[data-skin="fresh"][data-theme="dark"] {
  --ink-900: #ECF7F1;
  --ink-800: #DDF1E8;
  --ink-700: #C3DED2;
  --ink-600: #A3C3B5;
  --ink-500: #84A697;
  --ink-400: #6A8B7C;
  --ink-300: #526E61;
  --line-strong: #2E4A3E;
  --line: #23392F;
  --line-soft: #1A2B23;
  --paper: #0D1914;
  --paper-2: #08120E;
  --paper-3: #14241D;

  --brand-900: #D7F5E8;
  --brand-800: #B9EBD9;
  --brand-700: #8FDCC2;
  --brand-600: #63C7A6;
  --brand-500: #47AD8D;
  --brand-200: #235043;
  --brand-100: #183A30;
  --brand-50: #112822;

  --brand-surface: #1A7A67;
  --brand-surface-hover: #208F77;
  --brand-surface-fg: #F2FBF6;
  --brand-surface-fg-soft: rgba(242, 251, 246, .78);

  --accent-700: #FFC08A;
  --accent-600: #FFA45C;
  --accent-100: #3A2614;
  --accent-50: #2A1B10;
  --gold-700: #FFD98A;
  --gold-100: #3A3016;

  --elevated: #14241D;
  --elevated-blur: rgba(13, 25, 20, .94);
  --scrim-photo: rgba(13, 25, 20, .86);
  --overlay: rgba(0, 0, 0, .64);
  --sh-1: 0 1px 2px rgba(0, 0, 0, .5);
  --sh-2: 0 2px 10px rgba(0, 0, 0, .45);
  --sh-3: 0 10px 26px rgba(0, 0, 0, .5);
  --sh-4: 0 20px 50px rgba(0, 0, 0, .6);

  --page-glow-1: rgba(255, 209, 102, .06);
  --page-glow-2: rgba(26, 122, 103, .10);
  --footer-bg: linear-gradient(160deg, #04100B 0%, #08120E 58%, #0B2019 100%);
  --rail-head-bg: linear-gradient(135deg, #1A2B23, #23392F);
  --rail-head-fg: #B9EBD9;

  --hero-bg:
    radial-gradient(700px 400px at 88% -12%, rgba(255, 209, 102, .14), transparent 64%),
    radial-gradient(600px 360px at 4% 0%, rgba(26, 122, 103, .22), transparent 62%),
    linear-gradient(165deg, #0A1511 0%, #12241D 55%, #183026 100%);
  --hero-ink: #F2FBF6;
  --hero-muted: #B7D4C8;
  --hero-accent: #FFB27A;
  --hero-highlight: rgba(255, 209, 102, .20);
  --hero-dot: rgba(255, 255, 255, .08);
  --hero-eyebrow-bg: rgba(255, 255, 255, .06);
  --hero-eyebrow-border: rgba(255, 209, 102, .28);
  --hero-eyebrow-fg: #FFD98A;
  --hero-aside-bg: #16241E;
  --hero-aside-border: #2E4A3E;
  --hero-aside-shadow: 0 20px 46px rgba(0, 0, 0, .5);
  --hero-stat: #F2FBF6;
  --hero-stat-label: #93B3A6;
  --hero-list: #CFE6DA;
}

/* 系统暗色 + 未手动指定浅色时，同样套用各皮肤的暗色令牌 */
@media (prefers-color-scheme: dark) {
  html[data-skin="classic"]:not([data-theme="light"]) {
    --ink-900: #EEF1F8;
    --ink-800: #E3E7F2;
    --ink-700: #CDD3E4;
    --ink-600: #AEB6CB;
    --ink-500: #9099B0;
    --ink-400: #737C94;
    --ink-300: #5A6278;
    --line-strong: #333B52;
    --line: #272E42;
    --line-soft: #1F2536;
    --paper: #161B2A;
    --paper-2: #0E1220;
    --paper-3: #1D2436;
    --brand-900: #DCE3FF;
    --brand-800: #C3CDFF;
    --brand-700: #A4B1F5;
    --brand-600: #8A99EA;
    --brand-500: #7180D6;
    --brand-200: #2F3862;
    --brand-100: #232A4C;
    --brand-50: #1A2038;
    --brand-surface: #3949AB;
    --brand-surface-hover: #4A5BC4;
    --brand-surface-fg: #FFFFFF;
    --brand-surface-fg-soft: rgba(255, 255, 255, .78);
    --accent-700: #FFC08A;
    --accent-600: #FFA45C;
    --accent-100: #3A2614;
    --accent-50: #2A1B10;
    --gold-700: #FFD98A;
    --gold-100: #3A2E10;
    --elevated: #1D2436;
    --elevated-blur: rgba(22, 27, 42, .94);
    --scrim-photo: rgba(22, 27, 42, .86);
    --overlay: rgba(0, 0, 0, .64);
    --sh-1: 0 1px 2px rgba(0, 0, 0, .5);
    --sh-2: 0 2px 10px rgba(0, 0, 0, .45);
    --sh-3: 0 10px 26px rgba(0, 0, 0, .5);
    --sh-4: 0 20px 50px rgba(0, 0, 0, .6);
    --page-glow-1: rgba(92, 107, 192, .10);
    --page-glow-2: rgba(255, 111, 0, .06);
    --footer-bg: linear-gradient(160deg, #05081F 0%, #0B1030 58%, #151C4A 100%);
    --rail-head-bg: linear-gradient(135deg, #232A4C, #2F3862);
    --rail-head-fg: #C3CDFF;
    --hero-bg:
      radial-gradient(700px 400px at 88% -12%, rgba(255, 213, 79, .10), transparent 64%),
      linear-gradient(135deg, #080C2B 0%, #101743 52%, #1A237E 100%);
    --hero-ink: #FFFFFF;
    --hero-muted: rgba(255, 255, 255, .76);
    --hero-accent: #FFD54F;
    --hero-highlight: rgba(255, 213, 79, .20);
    --hero-dot: rgba(255, 255, 255, .07);
    --hero-eyebrow-bg: rgba(255, 255, 255, .10);
    --hero-eyebrow-border: rgba(255, 213, 79, .30);
    --hero-eyebrow-fg: #FFD54F;
    --hero-aside-bg: rgba(255, 255, 255, .07);
    --hero-aside-border: rgba(255, 255, 255, .16);
    --hero-aside-shadow: 0 20px 46px rgba(0, 0, 0, .5);
    --hero-stat: #FFFFFF;
    --hero-stat-label: rgba(255, 255, 255, .58);
    --hero-list: rgba(255, 255, 255, .82);
  }

  html[data-skin="fresh"]:not([data-theme="light"]) {
    --ink-900: #ECF7F1;
    --ink-800: #DDF1E8;
    --ink-700: #C3DED2;
    --ink-600: #A3C3B5;
    --ink-500: #84A697;
    --ink-400: #6A8B7C;
    --ink-300: #526E61;
    --line-strong: #2E4A3E;
    --line: #23392F;
    --line-soft: #1A2B23;
    --paper: #0D1914;
    --paper-2: #08120E;
    --paper-3: #14241D;
    --brand-900: #D7F5E8;
    --brand-800: #B9EBD9;
    --brand-700: #8FDCC2;
    --brand-600: #63C7A6;
    --brand-500: #47AD8D;
    --brand-200: #235043;
    --brand-100: #183A30;
    --brand-50: #112822;
    --brand-surface: #1A7A67;
    --brand-surface-hover: #208F77;
    --brand-surface-fg: #F2FBF6;
    --brand-surface-fg-soft: rgba(242, 251, 246, .78);
    --accent-700: #FFC08A;
    --accent-600: #FFA45C;
    --accent-100: #3A2614;
    --accent-50: #2A1B10;
    --gold-700: #FFD98A;
    --gold-100: #3A3016;
    --elevated: #14241D;
    --elevated-blur: rgba(13, 25, 20, .94);
    --scrim-photo: rgba(13, 25, 20, .86);
    --overlay: rgba(0, 0, 0, .64);
    --sh-1: 0 1px 2px rgba(0, 0, 0, .5);
    --sh-2: 0 2px 10px rgba(0, 0, 0, .45);
    --sh-3: 0 10px 26px rgba(0, 0, 0, .5);
    --sh-4: 0 20px 50px rgba(0, 0, 0, .6);
    --page-glow-1: rgba(255, 209, 102, .06);
    --page-glow-2: rgba(26, 122, 103, .10);
    --footer-bg: linear-gradient(160deg, #04100B 0%, #08120E 58%, #0B2019 100%);
    --rail-head-bg: linear-gradient(135deg, #1A2B23, #23392F);
    --rail-head-fg: #B9EBD9;
    --hero-bg:
      radial-gradient(700px 400px at 88% -12%, rgba(255, 209, 102, .14), transparent 64%),
      radial-gradient(600px 360px at 0% 0%, rgba(26, 122, 103, .22), transparent 62%),
      linear-gradient(165deg, #0A1511 0%, #12241D 55%, #183026 100%);
    --hero-ink: #F2FBF6;
    --hero-muted: #B7D4C8;
    --hero-accent: #FFB27A;
    --hero-highlight: rgba(255, 209, 102, .20);
    --hero-dot: rgba(255, 255, 255, .08);
    --hero-eyebrow-bg: rgba(255, 255, 255, .06);
    --hero-eyebrow-border: rgba(255, 209, 102, .28);
    --hero-eyebrow-fg: #FFD98A;
    --hero-aside-bg: #16241E;
    --hero-aside-border: #2E4A3E;
    --hero-aside-shadow: 0 20px 46px rgba(0, 0, 0, .5);
    --hero-stat: #F2FBF6;
    --hero-stat-label: #93B3A6;
    --hero-list: #CFE6DA;
  }
}