/* =========================================================================
   THEMES — Luna planner palettes (planner-theme-palettes skill)
   Loaded LAST so these rules win over the older component styles.
   Theme ids are saved in people's data: never rename "blush", "rainbow-pastel", "neutral" or "dark".
   ========================================================================= */

:root, [data-theme="blush"] {
  color-scheme: light;
  --bg: #FAFAFA; --surface: #FFFFFF; --surface-alt: #FAF7F5;
  --nav-bg: #EFD6D2; --nav-text: #4A2F33; --nav-icon: #9A5E66; --nav-hover-bg: #E9CAC5; --nav-active-bg: #FAF7F5; --nav-active-text: #3B2427;
  --text: #3A2E30; --text-muted: #73666A; --heading: #3A2E30; --link: #5E7A62;
  --border: #EDE3E0; --border-accent: #E1C1C1; --divider: #F2ECEA;
  --btn-primary-bg: #AFC2B0; --btn-primary-text: #22362A; --btn-primary-hover: #9DB49F;
  --btn-secondary-bg: #EFD6D2; --btn-secondary-text: #5A3439; --btn-secondary-hover: #E6C6C1;
  --btn-ghost-text: #5E7A62; --btn-ghost-border: #AFC2B0;
  --accent-1: #E1C1C1; --accent-1-deep: #A86B72; --accent-2: #AFC2B0; --accent-2-deep: #5E7A62;
  --chip-1-bg: #F6E4E1; --chip-1-text: #7A424A; --chip-2-bg: #E4ECE4; --chip-2-text: #3E5A44;
  --chip-3-bg: #F3ECE8; --chip-3-text: #6A5552; --chip-4-bg: #F2E6DA; --chip-4-text: #7A5634;
  --chart-1: #E1C1C1; --chart-2: #AFC2B0; --chart-3: #C9979D; --chart-4: #84A088; --chart-5: #D9AFAA; --chart-6: #D4BFA6;
  --bar-edge: #B0838A; --chart-edge: #B88A90; --chart-track: #F3ECEA; --progress-track: #F3E8E6; --progress-fill: #AFC2B0;
  --success-bg: #E4ECE4; --success-text: #3E5A44; --warning-bg: #F6E6D3; --warning-text: #7A5226;
  --danger-bg: #F6DCDD; --danger-text: #8E3E48; --info-bg: #F6E4E1; --info-text: #6E3E45;
  --callout-bg: #F7E6E3; --callout-border: #E1C1C1; --focus-ring: #A86B72; --brand-stripe: none;
  --done-bg: #AFC2B0; --done-text: #22362A;   /* app extension: completed habit cells / challenge days */
}

[data-theme="rainbow-pastel"] {
  color-scheme: light;
  --bg: #FAFAFA; --surface: #FFFFFF; --surface-alt: #FBFAF8;
  --nav-bg: #EFEDF5; --nav-text: #36305E; --nav-icon: #6B62A8; --nav-hover-bg: #E6E3F0; --nav-active-bg: #FFFFFF; --nav-active-text: #2B2552;
  --text: #2F2D3A; --text-muted: #696676; --heading: #2F2D3A; --link: #3F6A9C;
  --border: #ECEAF0; --border-accent: #D8D4F2; --divider: #F1EFF3;
  --btn-primary-bg: #C9DDF2; --btn-primary-text: #1F3A5C; --btn-primary-hover: #B5CFEC;
  --btn-secondary-bg: #F6D1C1; --btn-secondary-text: #6E3520; --btn-secondary-hover: #F1C2AE;
  --btn-ghost-text: #4F4793; --btn-ghost-border: #D8D4F2;
  --accent-1: #D8D4F2; --accent-1-deep: #6B62A8; --accent-2: #C9DDF2; --accent-2-deep: #3F6A9C;
  --chip-1-bg: #FBE5DB; --chip-1-text: #7E3B22; --chip-2-bg: #F8E7CF; --chip-2-text: #77501C;
  --chip-3-bg: #F7F0CF; --chip-3-text: #655619; --chip-4-bg: #E0EEE5; --chip-4-text: #2F5C40;
  --chip-5-bg: #E0EBF8; --chip-5-text: #264E7C; --chip-6-bg: #E8E5F8; --chip-6-text: #463E86;
  --chart-1: #F2B9A3; --chart-2: #EDC690; --chart-3: #E6D488; --chart-4: #A8D0B6; --chart-5: #A6C6E8; --chart-6: #BCB5EA;
  --bar-edge: #8F87C4; --chart-edge: #8F87C4; --chart-track: #F1EFF3; --progress-track: #EFEDF6;
  --progress-fill: linear-gradient(90deg,#F6D1C1,#F3D8B5,#F1E4B3,#CFE3D6,#C9DDF2,#D8D4F2);
  --success-bg: #E0EEE5; --success-text: #2F5C40; --warning-bg: #F8E7CF; --warning-text: #77501C;
  --danger-bg: #FBE0D6; --danger-text: #8A3A22; --info-bg: #E0EBF8; --info-text: #264E7C;
  --callout-bg: #F1EFFA; --callout-border: #D8D4F2; --focus-ring: #6B62A8;
  --brand-stripe: linear-gradient(90deg,#F6D1C1,#F3D8B5,#F1E4B3,#CFE3D6,#C9DDF2,#D8D4F2);
  --done-bg: #C9DDF2; --done-text: #1F3A5C;
}

[data-theme="neutral"] {
  color-scheme: light;
  --bg: #FAFAFA; --surface: #FFFFFF; --surface-alt: #FAF8F4;
  --nav-bg: #C5D9D8; --nav-text: #243B3A; --nav-icon: #4E6C6B; --nav-hover-bg: #B6CECD; --nav-active-bg: #FAF8F4; --nav-active-text: #1F3332;
  --text: #2D3133; --text-muted: #676D70; --heading: #2D3133; --link: #555F80;
  --border: #ECE9E5; --border-accent: #C5D9D8; --divider: #F1EFEB;
  --btn-primary-bg: #666F8F; --btn-primary-text: #FFFFFF; --btn-primary-hover: #596282;
  --btn-secondary-bg: #C5D9D8; --btn-secondary-text: #243B3A; --btn-secondary-hover: #B6CECD;
  --btn-ghost-text: #555F80; --btn-ghost-border: #AEB6D2;
  --accent-1: #A2B6B5; --accent-1-deep: #4E6C6B; --accent-2: #AEB6D2; --accent-2-deep: #555F80;
  --chip-1-bg: #E3EDEC; --chip-1-text: #2F4D4C; --chip-2-bg: #E6E9F3; --chip-2-text: #3E4768;
  --chip-3-bg: #EFECE7; --chip-3-text: #5A544B; --chip-4-bg: #DCE3E2; --chip-4-text: #34494A;
  --chart-1: #A2B6B5; --chart-2: #7D86A4; --chart-3: #C5D9D8; --chart-4: #AEB6D2; --chart-5: #D3CABE; --chart-6: #5F7A79;
  --bar-edge: #6E8786; --chart-edge: #6E8786; --chart-track: #F1EFEB; --progress-track: #ECE9E5; --progress-fill: #A2B6B5;
  --success-bg: #E3EDEC; --success-text: #2F4D4C; --warning-bg: #F1E8DA; --warning-text: #6B5126;
  --danger-bg: #F2E1DF; --danger-text: #83423E; --info-bg: #E6E9F3; --info-text: #3E4768;
  --callout-bg: #EEF4F3; --callout-border: #C5D9D8; --focus-ring: #7D86A4; --brand-stripe: none;
  --done-bg: #AEB6D2; --done-text: #2B3352;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1D1E23; --surface: #25272E; --surface-alt: #2B2D35;
  --nav-bg: #2C2F39; --nav-text: #E3E1EA; --nav-icon: #A9B0D6; --nav-hover-bg: #353947; --nav-active-bg: #3B4052; --nav-active-text: #F3F1F6;
  --text: #E8E6E3; --text-muted: #A9A7B0; --heading: #F1EFEC; --link: #A9C4E6;
  --border: #363944; --border-accent: #4A4F64; --divider: #30333C;
  --btn-primary-bg: #A9B0D6; --btn-primary-text: #1D1E2B; --btn-primary-hover: #BBC1E0;
  --btn-secondary-bg: #3A3E4D; --btn-secondary-text: #E8E6EF; --btn-secondary-hover: #454A5C;
  --btn-ghost-text: #C2C8E6; --btn-ghost-border: #555B75;
  --accent-1: #A9B0D6; --accent-1-deep: #C2C8E6; --accent-2: #9DB8A0; --accent-2-deep: #B6CDB8;
  --chip-1-bg: #3A3550; --chip-1-text: #D6D1F2; --chip-2-bg: #2F4136; --chip-2-text: #C8E0CC;
  --chip-3-bg: #4A3437; --chip-3-text: #F0CFCF; --chip-4-bg: #2E3C4E; --chip-4-text: #C9DCF2;
  --chart-1: #A9B0D6; --chart-2: #9DB8A0; --chart-3: #E3B5B5; --chart-4: #9CC3E6; --chart-5: #E6D29A; --chart-6: #E8B49E;
  --bar-edge: #1D1E23; --chart-edge: #1D1E23; --chart-track: #30333C; --progress-track: #30333C; --progress-fill: #9DB8A0;
  --success-bg: #2F4136; --success-text: #C8E0CC; --warning-bg: #463D2B; --warning-text: #EBD9A9;
  --danger-bg: #4A3437; --danger-text: #F0C4C4; --info-bg: #2E3C4E; --info-text: #C9DCF2;
  --callout-bg: #2B2D3A; --callout-border: #4A4F64; --focus-ring: #C2C8E6; --brand-stripe: none;
  --done-bg: #9DB8A0; --done-text: #1D1E2B;
}

/* ---- The app's original color names, pointed at the tokens ---- */
:root, [data-theme] {
  --bg-primary: var(--bg);
  --bg-secondary: var(--chart-track);      /* gently tinted panels, slots, rows */
  --card-bg: var(--surface);
  --text-primary: var(--text);
  --text-secondary: var(--text-muted);
  --accent-primary: var(--accent-1-deep);  /* accent text, borders, icons — never a button fill */
  --accent-secondary: var(--accent-2);
  --highlight: var(--callout-bg);
}

/* ---- Base ---- */
h1, h2, h3, h4 { color: var(--heading); }
a { color: var(--link); }
::placeholder { color: var(--text-muted); opacity: .8; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--accent-2-deep); }
.empty-state { color: var(--text-muted); }

/* ---- Menu bar ---- */
.topnav { background: var(--nav-bg); border-bottom: 1px solid var(--border); }
.topnav::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--brand-stripe); pointer-events: none; }
.brand { color: var(--nav-text); }
.topnav .icon-btn { color: var(--nav-icon); }
@media (hover: hover) { .topnav .icon-btn:hover { background: var(--nav-hover-bg); color: var(--nav-active-text); } }
.tab-btn { color: var(--nav-text); border-bottom: 0; }
@media (hover: hover) { .tab-btn:hover { background: var(--nav-hover-bg); color: var(--nav-active-text); } }
.tab-btn.active { background: var(--nav-active-bg); color: var(--nav-active-text); box-shadow: inset 3px 0 0 var(--accent-1-deep); }
.swatch.blush   { background: linear-gradient(135deg, #EFD6D2 50%, #AFC2B0 50%); }
.swatch.rainbow-pastel { background: conic-gradient(#F2B9A3, #EDC690, #E6D488, #A8D0B6, #A6C6E8, #BCB5EA, #F2B9A3); }
.swatch.neutral { background: linear-gradient(135deg, #C5D9D8 50%, #666F8F 50%); }
.swatch.dark    { background: linear-gradient(135deg, #2C2F39 50%, #A9B0D6 50%); }
.swatch.active { border-color: var(--nav-text); }
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  .tabs { background: var(--nav-bg) !important; border-top: 1px solid var(--border) !important; }
}

/* ---- Buttons ---- */
.btn { background: var(--btn-primary-bg); color: var(--btn-primary-text); font-weight: 600; border: 1.5px solid transparent; }
@media (hover: hover) { .btn:hover { background: var(--btn-primary-hover); filter: none; } }
.btn.btn-secondary, .btn-secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); border: 1.5px solid transparent; }
@media (hover: hover) { .btn.btn-secondary:hover, .btn-secondary:hover { background: var(--btn-secondary-hover); color: var(--btn-secondary-text); } }
.btn.btn-ghost, .btn-ghost { background: var(--surface); color: var(--btn-ghost-text); border: 1px solid var(--btn-ghost-border); }
@media (hover: hover) { .btn.btn-ghost:hover, .btn-ghost:hover { background: var(--surface); color: var(--btn-ghost-text); border-color: var(--btn-ghost-text); } }
.btn:disabled, .btn[disabled], .btn-secondary:disabled {
  background: transparent; color: var(--text-muted); border: 1px solid var(--btn-ghost-border); cursor: not-allowed; transform: none;
}
/* Delete / erase buttons */
.btn-danger, .btn.btn-danger { background: var(--surface); color: var(--danger-text); border: 1px solid var(--danger-text); }
@media (hover: hover) { .btn-danger:hover, .btn.btn-danger:hover { background: var(--danger-bg); color: var(--danger-text); } }

/* ---- Selected / "on" states: a pastel fill with deep text of the same hue ---- */
.energy-pill.selected, .mood-pill.selected, .cat-btn.active, .ritual-pill.on, .seg button.on,
.said-dot.on, .voice-play, .vbar-ctrls button:first-child, .rt-go, .wp-pic span, .og-flag.mine,
.cal-day.today, .moon-cal-day.today, #update-banner button:not(#fsq-update-later) {
  background: var(--btn-primary-bg); color: var(--btn-primary-text); border-color: var(--btn-primary-bg);
}
.habits-table .habit-cell.done, .ca-day.done {
  background: var(--done-bg); color: var(--done-text); border-color: var(--done-bg);
}
.ritual-tile.done .rt-go { background: var(--surface-alt); color: var(--text-muted); }
.said-dot, .rec-btn { border-color: var(--btn-ghost-border); color: var(--btn-ghost-text); }
.ca-day.now { border-color: var(--accent-1-deep); color: var(--accent-1-deep); box-shadow: 0 0 0 3px var(--callout-bg); }
.cc-done { color: var(--success-text); }
.ritual-streak { background: var(--surface); border-color: var(--border); color: var(--text); }

/* ---- Progress bars & charts ---- */
.alignment-bar, .rc-bar, .ca-bar, .timer-progress, .sc-bar, .hbar { background: var(--progress-track); }
.alignment-fill, .sc-bar-fill, .hbar-fill, .timer-progress-fill, .rc-bar span, .ca-bar span, .rec-level div { background: var(--progress-fill); }
.ritual-dots span.past { background: var(--accent-2); }
.ritual-dots span.now { background: var(--accent-1-deep); }
/* Pastel bars get a very thin outline (--bar-edge, at least 3:1 on the card) so they read as shapes. */
.chart-bar, .hbar-fill { box-shadow: inset 0 0 0 1px var(--bar-edge); }
.chart-bar { background: var(--chart-1); }
.chart-bar .bar-val, .chart-label { color: var(--text-muted); }
.score-circle { background: conic-gradient(var(--chart-2) calc(var(--score, 0) * 1%), var(--chart-track) 0); }
.viz-ring { background: conic-gradient(var(--accent-2-deep) calc(var(--p) * 1%), var(--chart-track) 0); }
.cal-day.has-entry::after { background: var(--accent-1-deep); }
.timeline-item::before { background: var(--accent-1-deep); border-color: var(--surface); }
.line-path { stroke: var(--accent-1-deep); }
.streak-num { color: var(--accent-1-deep); }
.goal-mini { border-left-color: var(--border-accent); }

/* ---- Cards ---- */
.card { background: var(--surface); border-color: var(--border); }
.vb-card { background: var(--surface); }
.action-list-card.inspired { background: linear-gradient(135deg, var(--chip-2-bg), var(--surface) 60%); }
.action-list-card.micro    { background: linear-gradient(135deg, var(--chip-4-bg), var(--surface) 60%); }
.action-list-card.courage  { background: linear-gradient(135deg, var(--chip-1-bg), var(--surface) 60%); }
.action-type-card { margin: 0; color: var(--text); }
.action-type-card.forced    { background: var(--danger-bg);  border-color: var(--danger-bg); }
.action-type-card.aligned   { background: var(--success-bg); border-color: var(--success-bg); }
.action-type-card.avoidance { background: var(--warning-bg); border-color: var(--warning-bg); }
.action-type-card h3 { color: var(--text); }
.affirmation-card, .rituals-card, .voice-hero { background: linear-gradient(135deg, var(--callout-bg), var(--surface) 70%); border-color: var(--callout-border); }
.rituals-card .section-label, .affirmation-card .section-label { color: var(--text-muted); }
.ritual-overlay.ritual-morning { background: linear-gradient(180deg, var(--callout-bg), var(--bg) 55%); }
.ritual-overlay.ritual-evening { background: linear-gradient(180deg, var(--surface-alt), var(--bg) 60%); }

/* ---- Completed tasks: muted text, soft accent strikethrough ---- */
.action-row.completed input[type="text"], .action-row-2.done .at {
  color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--border-accent);
}

/* ---- Rainbow Pastel signature ----
   A 6px rainbow stripe across the top of the menu (--brand-stripe), menu accents cycling through the six
   hues, and rainbow habit/progress bars. The menu icons are emoji (already colorful), so the cycling hue
   shows as each tab's active line and hover tint instead. */
[data-theme="rainbow-pastel"] .topnav { padding-top: max(18px, calc(env(safe-area-inset-top) + 6px)); }
[data-theme="rainbow-pastel"] .tab-btn:nth-child(6n+1) { --tab-hue: var(--chip-1-text); --tab-tint: var(--chip-1-bg); }
[data-theme="rainbow-pastel"] .tab-btn:nth-child(6n+2) { --tab-hue: var(--chip-2-text); --tab-tint: var(--chip-2-bg); }
[data-theme="rainbow-pastel"] .tab-btn:nth-child(6n+3) { --tab-hue: var(--chip-3-text); --tab-tint: var(--chip-3-bg); }
[data-theme="rainbow-pastel"] .tab-btn:nth-child(6n+4) { --tab-hue: var(--chip-4-text); --tab-tint: var(--chip-4-bg); }
[data-theme="rainbow-pastel"] .tab-btn:nth-child(6n+5) { --tab-hue: var(--chip-5-text); --tab-tint: var(--chip-5-bg); }
[data-theme="rainbow-pastel"] .tab-btn:nth-child(6n+6) { --tab-hue: var(--chip-6-text); --tab-tint: var(--chip-6-bg); }
@media (hover: hover) { [data-theme="rainbow-pastel"] .tab-btn:hover { background: var(--tab-tint); } }
[data-theme="rainbow-pastel"] .tab-btn.active { box-shadow: inset 3px 0 0 var(--tab-hue), inset 0 -3px 0 var(--tab-tint); }
/* Habit ticks take a different rainbow hue on each row */
[data-theme="rainbow-pastel"] .habits-table tbody tr:nth-child(6n+1) .habit-cell.done { background: var(--chart-1); border-color: var(--chart-1); color: var(--chip-1-text); }
[data-theme="rainbow-pastel"] .habits-table tbody tr:nth-child(6n+2) .habit-cell.done { background: var(--chart-2); border-color: var(--chart-2); color: #6B4716; }  /* chip-2-text deepened: 4.44 → 5.15 on chart-2 */
[data-theme="rainbow-pastel"] .habits-table tbody tr:nth-child(6n+3) .habit-cell.done { background: var(--chart-3); border-color: var(--chart-3); color: var(--chip-3-text); }
[data-theme="rainbow-pastel"] .habits-table tbody tr:nth-child(6n+4) .habit-cell.done { background: var(--chart-4); border-color: var(--chart-4); color: var(--chip-4-text); }
[data-theme="rainbow-pastel"] .habits-table tbody tr:nth-child(6n+5) .habit-cell.done { background: var(--chart-5); border-color: var(--chart-5); color: var(--chip-5-text); }
[data-theme="rainbow-pastel"] .habits-table tbody tr:nth-child(6n+6) .habit-cell.done { background: var(--chart-6); border-color: var(--chart-6); color: var(--chip-6-text); }
/* Chart bars cycle through the six hues too */
[data-theme="rainbow-pastel"] .chart-bar:nth-child(6n+2) { background: var(--chart-2); }
[data-theme="rainbow-pastel"] .chart-bar:nth-child(6n+3) { background: var(--chart-3); }
[data-theme="rainbow-pastel"] .chart-bar:nth-child(6n+4) { background: var(--chart-4); }
[data-theme="rainbow-pastel"] .chart-bar:nth-child(6n+5) { background: var(--chart-5); }
[data-theme="rainbow-pastel"] .chart-bar:nth-child(6n+6) { background: var(--chart-6); }

/* ---- Home welcome panel + illustration (scripts/hero-art.js, styles/hero.css) ----
   Each theme maps the picture's parts to its own chart/chip colors, so a theme edit carries through.
   In Dark the "paper" (polaroids, journal pages) stays light, so the ink on it is dark. */
:root, [data-theme="blush"] {
  --hero-bg: linear-gradient(118deg, var(--callout-bg) 0%, var(--surface) 55%, var(--chip-2-bg) 100%);
  --hero-border: var(--callout-border); --hero-eyebrow-bg: var(--chip-1-bg); --hero-eyebrow-text: var(--chip-1-text);
  --art-glow: var(--chip-1-bg); --art-moon: var(--chart-5); --art-spark: var(--accent-1-deep); --art-shadow: var(--text);
  --art-page: var(--surface); --art-ink: var(--text);
  --art-frame: var(--chart-3); --art-board: var(--chip-4-bg); --art-pin: var(--accent-1-deep);
  --art-pic1: var(--chart-2); --art-pic2: var(--chart-1); --art-pic3: var(--chart-6); --art-note: var(--chart-5);
  --art-cover: var(--chart-4); --art-pen: var(--accent-1-deep);
  --art-candle: var(--chart-1); --art-flame: var(--chart-6); --art-crystal: var(--chart-3); --art-crystal2: var(--chart-2);
}
[data-theme="rainbow-pastel"] {
  --hero-bg: linear-gradient(118deg, var(--callout-bg) 0%, var(--surface) 55%, var(--chip-5-bg) 100%);
  --hero-border: var(--callout-border); --hero-eyebrow-bg: var(--chip-6-bg); --hero-eyebrow-text: var(--chip-6-text);
  --art-glow: var(--chip-3-bg); --art-moon: var(--chart-3); --art-spark: var(--accent-1-deep); --art-shadow: var(--text);
  --art-page: var(--surface); --art-ink: var(--text);
  --art-frame: var(--chart-6); --art-board: var(--chip-2-bg); --art-pin: var(--accent-1-deep);
  --art-pic1: var(--chart-5); --art-pic2: var(--chart-1); --art-pic3: var(--chart-4); --art-note: var(--chart-3);
  --art-cover: var(--chart-5); --art-pen: var(--accent-1-deep);
  --art-candle: var(--chart-6); --art-flame: var(--chart-2); --art-crystal: var(--chart-5); --art-crystal2: var(--chart-4);
}
[data-theme="neutral"] {
  --hero-bg: linear-gradient(118deg, var(--callout-bg) 0%, var(--surface) 55%, var(--chip-2-bg) 100%);
  --hero-border: var(--callout-border); --hero-eyebrow-bg: var(--chip-1-bg); --hero-eyebrow-text: var(--chip-1-text);
  --art-glow: var(--chip-3-bg); --art-moon: var(--chart-3); --art-spark: var(--accent-1-deep); --art-shadow: var(--text);
  --art-page: var(--surface); --art-ink: var(--text);
  --art-frame: var(--chart-2); --art-board: var(--chip-1-bg); --art-pin: var(--accent-2-deep);
  --art-pic1: var(--chart-1); --art-pic2: var(--chart-4); --art-pic3: var(--chart-5); --art-note: var(--chart-3);
  --art-cover: var(--chart-6); --art-pen: var(--accent-2-deep);
  --art-candle: var(--chart-1); --art-flame: var(--chart-5); --art-crystal: var(--chart-4); --art-crystal2: var(--chart-3);
}
[data-theme="dark"] {
  --hero-bg: linear-gradient(118deg, var(--callout-bg) 0%, var(--surface) 55%, var(--chip-1-bg) 100%);
  --hero-border: var(--callout-border); --hero-eyebrow-bg: var(--chip-4-bg); --hero-eyebrow-text: var(--chip-4-text);
  --art-glow: var(--chip-1-bg); --art-moon: var(--chart-5); --art-spark: var(--chart-5); --art-shadow: #000000;
  --art-page: #E3E1EA; --art-ink: #25272E;
  --art-frame: var(--chart-1); --art-board: var(--chip-3-bg); --art-pin: var(--chart-6);
  --art-pic1: var(--chart-2); --art-pic2: var(--chart-3); --art-pic3: var(--chart-4); --art-note: var(--chart-5);
  --art-cover: var(--chart-1); --art-pen: var(--chart-6);
  --art-candle: #E3E1EA; --art-flame: var(--chart-5); --art-crystal: var(--chart-4); --art-crystal2: var(--chart-1);
}