/* Shared Groomed Hair palette, applied after page-specific styles. */
:root {
  color-scheme: light;
  --gh-plum: #49243f;
  --gh-plum-mid: #663858;
  --gh-coral: #f3ad91;
  --gh-lilac: #f7e6ee;
  --gh-lilac-strong: #ecd0de;
  --gh-cream: #faf8f8;
  --gh-canvas: #f6e9ef;
  --gh-paper: #ffffff;
  --gh-ink: #302631;
  --gh-muted: #5e505d;
  --gh-border: #e6cfda;
  --bg: var(--gh-canvas);
  --paper: var(--gh-paper);
  --card: var(--gh-paper);
  --text: var(--gh-ink);
  --muted: var(--gh-muted);
  --line: var(--gh-border);
  /* Legacy component tokens now resolve to the brand colors. */
  --olive: var(--gh-plum-mid);
  --olive-dark: var(--gh-plum);
  --olive-light: var(--gh-lilac);
  --peach: var(--gh-coral);
  --coral: #a95270;
  --purple: var(--gh-plum-mid);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --night-bg: #211b23;
  --night-surface: #2b232e;
  --night-raised: #382d3b;
  --night-border: #514453;
  --night-text: #f8eff6;
  --night-muted: #d0c0d0;
  --night-accent: #f3ad91;
  --gh-plum: #d2a1c5;
  --gh-plum-mid: #9a6d91;
  --gh-coral: #f3ad91;
  --gh-lilac: #443447;
  --gh-lilac-strong: #59445c;
  --gh-cream: #211b23;
  --gh-canvas: #211b23;
  --gh-paper: #2b232e;
  --gh-ink: #f8eff6;
  --gh-muted: #d0c0d0;
  --gh-border: #514453;
  --bg: var(--gh-canvas);
  --paper: var(--gh-paper);
  --card: var(--gh-paper);
  --text: var(--gh-ink);
  --muted: var(--gh-muted);
  --line: var(--gh-border);
  --olive: var(--gh-plum-mid);
  --olive-dark: var(--gh-plum);
  --olive-light: var(--gh-lilac);
  --peach: var(--gh-coral);
  --coral: var(--gh-coral);
  --purple: var(--gh-plum);
}

html body { background: var(--bg); color: var(--text); }
html body :is(h1, h2, h3, h4) { color: var(--text); }
html body :is(a, .text-link) { text-decoration-color: var(--gh-lilac-strong); }
html body .text-link, html body .eyebrow { color: var(--gh-plum-mid); }
html body :is(input, textarea, select) { border-color: var(--gh-border); }
html body :is(input, textarea, select, button, a, summary):focus-visible {
  outline: 3px solid var(--gh-coral) !important;
  outline-offset: 3px;
}
html body :is(input[type="checkbox"], input[type="radio"], progress) { accent-color: var(--gh-plum-mid); }
html body ::selection { background: var(--gh-lilac-strong); color: var(--gh-plum); }

/* Navigation and controls */
html body .sidebar {
  background: linear-gradient(165deg, var(--gh-paper), var(--gh-canvas)) !important;
  border-color: var(--gh-border) !important;
}
html body .sidebar nav a { color: var(--gh-muted) !important; }
html body .sidebar nav a.active,
html body .mobile-nav a.active {
  background: var(--gh-lilac) !important;
  color: var(--gh-plum) !important;
  box-shadow: inset 3px 0 var(--gh-plum-mid);
}
html body .topbar,
html body .mobile-nav {
  background: color-mix(in srgb, var(--gh-paper) 96%, transparent);
  border-color: var(--gh-border);
}
html body .primary-button,
html body #main :is(.chat-send, .community-message.mine p) {
  border-color: transparent !important;
  border-radius: 14px;
  background: var(--gh-plum-mid) !important;
  color: #fff !important;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--gh-plum) 14%, transparent);
}
html body .primary-button:hover,
html body #main .chat-send:hover { background: var(--gh-plum) !important; }
html body .secondary-button {
  border-color: var(--gh-lilac-strong);
  background: var(--gh-lilac);
  color: var(--gh-plum);
}
html body .secondary-button:hover {
  border-color: var(--gh-plum-mid);
  background: var(--gh-lilac-strong);
  color: var(--gh-plum);
}
html body .topbar .preference-controls button[data-action="theme"] {
  background: var(--gh-lilac) !important;
  color: var(--gh-plum) !important;
}

/* Shared surfaces, cards and soft callouts */
html body #main :is(
  .quick-card, .product-card, .product-detail, .product-info-grid article,
  .ritual-card, .recipe-card, .content-card, .content-card-body, .family-card,
  .news-card, .feature-card, .feature-form, .admin-panel, .diagnostic-panel,
  .result-panel, .learning-guide, .learning-guide article, .calendar-zone,
  .month-card, .day-card, .community-post, .community-feed, .community-chat,
  .community-online, .community-conversation, .game-board, .game-menu article,
  .profile-tile, .account-info, .account-form-panel, .search-field,
  .studio-links > a, .people-grid > a, .routine-home-grid > a, .home-install,
  .nature-card, .family-welcome, .family-add, .recipe-feature, .recovery-card,
  .qr-card
) {
  background-color: var(--gh-paper) !important;
  border-color: var(--gh-border) !important;
  color: var(--text);
}
html body #main :is(
  .notice, .empty-state, .tailored-note, .profile-context,
  .active-family-banner,
  .install-instructions, .admin-toolbar, .admin-form-section,
  .assessment-evidence
) {
  background-color: var(--gh-lilac) !important;
  border-color: var(--gh-lilac-strong) !important;
}
html body #main :is(.studio-photo, .studio-photo > img, .people-grid img) {
  background-color: var(--gh-lilac) !important;
}
html body #main :is(.studio-links > a:nth-child(2), .studio-links > a:nth-child(3)) {
  background-color: var(--gh-lilac) !important;
}
html body #main :is(.coin-badge, .art-sticker, .tag, .texture-badge, .product-tag) {
  background: var(--gh-lilac) !important;
  border-color: var(--gh-lilac-strong) !important;
  color: var(--gh-plum) !important;
}
html body #main :is(.studio-links h2, .people-grid h3, .routine-home-grid h3, .nature-card h3) {
  color: var(--gh-plum) !important;
}
html body #main :is(.studio-links a > span, .studio-links b, .people-grid p, .nature-card p, .studio-footnote) {
  color: var(--gh-muted) !important;
}

/* Feature headers use plum; coral is reserved for small highlights. */
html body #main :is(.studio-hero, .play-heading, .news-hero, .feature-hero, .profile-dashboard, .household-heading, .library-hero) {
  background: linear-gradient(125deg, var(--gh-plum), var(--gh-plum-mid)) !important;
  border-color: var(--gh-plum-mid) !important;
  color: #fff !important;
}
html body #main :is(.studio-hero, .play-heading, .news-hero, .feature-hero, .profile-dashboard, .household-heading, .library-hero) :is(h1, h2, h3, p) {
  color: #fff !important;
}
html body #main :is(.studio-hero, .play-heading, .news-hero, .feature-hero, .profile-dashboard, .household-heading, .library-hero) em,
html body #main :is(h1 em, h2 em) { color: var(--gh-coral) !important; }
html body #main #community-root .community-hero {
  background: linear-gradient(105deg, #49243ff2 0%, #49243fdc 38%, #49243f1c 100%), url('/assets/editorial-multicultural-v3.webp') center / cover !important;
  border-color: var(--gh-plum-mid) !important;
}
html body #main #community-root .community-hero :is(h1, h2, h3, p, .eyebrow) { color: #fff !important; }

/* Selected filters and community controls */
html body #main :is(
  .filter.active, .news-filters button.active, .protective-filters button.active,
  .community-filters button[aria-pressed="true"],
  .community-mobile-tabs button[aria-pressed="true"], .admin-tabs button.active,
  .auth-tabs button.active, .avatar-picker button.selected, .option.selected,
  .install-platforms button[aria-pressed="true"]
) {
  background: var(--gh-plum-mid) !important;
  border-color: var(--gh-plum-mid) !important;
  color: #fff !important;
}
html body #main :is(.community-message-form, .chat-emoji-grid, .chat-message-options[open], .community-mobile-tabs) {
  background: var(--gh-paper) !important;
  border-color: var(--gh-border) !important;
}
html body #main :is(.community-message-form textarea, .chat-composer textarea) { color: var(--text) !important; }
html body #main :is(.chat-attach, .chat-emoji-picker summary, .chat-welcome button, .chat-sound-toggle) {
  border-color: var(--gh-border) !important;
  background: var(--gh-lilac) !important;
  color: var(--gh-plum) !important;
}
html body .assistant-launcher, html body #modal-overlay .assistant-form button {
  background: var(--gh-plum-mid) !important;
  border-color: var(--gh-plum-mid) !important;
  color: #fff !important;
}
html body #modal-overlay .assistant-panel :is(.assistant-intro, .assistant-privacy, .assistant-form label) { color: var(--gh-muted) !important; }
html body #modal-overlay .assistant-panel .assistant-message.bot { background: var(--gh-lilac) !important; color: var(--gh-ink) !important; }
html body #modal-overlay .assistant-panel .assistant-message.user { background: var(--gh-plum-mid) !important; color: #fff !important; }
html body #modal-overlay .assistant-panel .assistant-next { color: var(--gh-plum-mid) !important; }
html body #modal-overlay .assistant-panel .assistant-topics button { background: var(--gh-paper) !important; border-color: var(--gh-border) !important; color: var(--gh-plum) !important; }
html body #modal-overlay .assistant-panel .assistant-form input { background: var(--gh-paper) !important; color: var(--gh-ink) !important; }
html body #main :is(.bilan-fun-question, .community-setting-card, .community-setting-help, .community-blocked-empty, .bilan-tip) {
  background: var(--gh-paper) !important;
  border-color: var(--gh-border) !important;
}
html body #main :is(.bilan-question-emoji, .bilan-fun-question .option-icon, .community-setting-icon, .community-setting-art) {
  background: var(--gh-lilac) !important;
  color: var(--gh-plum-mid) !important;
}
html body #main .bilan-progress-ring { background: conic-gradient(var(--gh-coral) var(--bilan-progress), var(--gh-lilac-strong) 0) !important; }
html body #main .bilan-fun-question .option:nth-child(n) {
  background: var(--gh-paper) !important;
  border-color: var(--gh-border) !important;
}
html body #main .bilan-fun-question .option.selected {
  background: var(--gh-lilac) !important;
  border-color: var(--gh-plum-mid) !important;
}
html body #main .bilan-fun-question .option.selected .option-check { background: var(--gh-plum-mid) !important; color: #fff !important; }
html body #main .bilan-tip { background: #fff8f4 !important; border-color: var(--gh-coral) !important; }
html body #main .bilan-tip summary, html body #main .bilan-encouragement { color: var(--gh-plum-mid) !important; }
html body #main #community-root :is(.community-live, .community-weekly, .community-topics button, .community-prompts button, .community-emoji-tools button, .community-reaction-picker button, .community-feed-tools, .community-save[aria-pressed="true"]) {
  background: var(--gh-lilac) !important;
  border-color: var(--gh-border) !important;
  color: var(--gh-plum) !important;
}
html body #main #community-root .community-weekly { background: linear-gradient(125deg, var(--gh-lilac), #fff8f4) !important; }
html body #main #community-root .community-weekly > button { background: var(--gh-plum-mid) !important; color: #fff !important; }
html body #main #community-root .community-prompts button:nth-child(2) { background: #fff8f4 !important; border-color: #f1c9b8 !important; color: var(--gh-plum) !important; }
html body #main #community-root .community-prompts button:nth-child(3) { background: var(--gh-lilac) !important; border-color: var(--gh-border) !important; color: var(--gh-plum) !important; }
html body #main #community-root .community-post:nth-child(3n+2) { border-top-color: var(--gh-coral) !important; }
html body #main #community-root .community-post:nth-child(3n) { border-top-color: var(--gh-plum-mid) !important; }
html body #main .community-setting-badge { background: var(--gh-lilac) !important; color: var(--gh-plum) !important; }

/* Reviews use plum for structure and coral for the stars. */
html body #main .reviews-panel {
  --review-brown: var(--gh-plum-mid);
  --review-ink: var(--gh-ink);
  --review-muted: var(--gh-muted);
  --review-line: var(--gh-border);
  --review-paper: var(--gh-paper);
  border-color: var(--gh-border) !important;
  background: var(--gh-lilac) !important;
  color: var(--text) !important;
}
html body #main .reviews-panel :is(.reviews-score, .reviews-write, .review-entry) {
  border-color: var(--gh-border) !important;
  background: var(--gh-paper) !important;
}
html body #main .reviews-panel :is(.reviews-score-stars, .reviews-write-icon) { color: var(--gh-coral) !important; }
html body #main .reviews-panel :is(.review-card-actions .text-link, .reviews-intro .eyebrow) { color: var(--gh-plum-mid) !important; }

/* Dark mode keeps the same hue relationships with deeper surfaces. */
html[data-theme="dark"] body { background: var(--gh-canvas) !important; color: var(--gh-ink) !important; }
html[data-theme="dark"] body #main { background: var(--gh-canvas) !important; color: var(--gh-ink) !important; }
html[data-theme="dark"] body #main :is(a, .text-link, .eyebrow, .card-meta, .product-brand) { color: var(--gh-plum) !important; }
html[data-theme="dark"] body :is(.sidebar, .topbar, .mobile-nav) {
  background: var(--gh-paper) !important;
  border-color: var(--gh-border) !important;
}
html[data-theme="dark"] body .sidebar nav a { color: var(--gh-muted) !important; }
html[data-theme="dark"] body .sidebar nav a.active,
html[data-theme="dark"] body .mobile-nav a.active { background: var(--gh-lilac) !important; color: #fff !important; }
html[data-theme="dark"] body #main :is(
  .quick-card, .product-card, .product-detail, .product-info-grid article,
  .ritual-card, .recipe-card, .content-card, .content-card-body, .family-card,
  .news-card, .feature-card, .feature-form, .admin-panel, .diagnostic-panel,
  .result-panel, .learning-guide, .learning-guide article, .calendar-zone,
  .month-card, .day-card, .community-post, .community-feed, .community-chat,
  .community-online, .community-conversation, .game-board, .game-menu article,
  .profile-tile, .account-info, .account-form-panel, .search-field,
  .studio-links > a, .people-grid > a, .routine-home-grid > a, .home-install,
  .nature-card, .family-welcome, .family-add, .recipe-feature, .recovery-card,
  .qr-card
) {
  background-color: var(--gh-paper) !important;
  border-color: var(--gh-border) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] body #main :is(
  .notice, .empty-state, .tailored-note, .profile-context,
  .active-family-banner,
  .install-instructions, .admin-toolbar, .admin-form-section,
  .assessment-evidence
) { background-color: var(--gh-lilac) !important; border-color: var(--gh-border) !important; color: var(--text) !important; }
html[data-theme="dark"] body #main :is(.studio-hero, .play-heading, .news-hero, .feature-hero, .profile-dashboard, .household-heading, .library-hero) {
  background: linear-gradient(125deg, #38273a, #493449) !important;
  border-color: var(--gh-border) !important;
}
html[data-theme="dark"] body #main :is(.studio-hero, .play-heading, .news-hero, .feature-hero, .profile-dashboard, .household-heading, .library-hero) :is(h1, h2, h3, p) { color: #fff !important; }
html[data-theme="dark"] body #main #community-root .community-hero {
  background: linear-gradient(105deg, #211b23f5 0%, #211b23dc 38%, #211b231c 100%), url('/assets/editorial-multicultural-v3.webp') center / cover !important;
  border-color: var(--gh-border) !important;
}
html[data-theme="dark"] body #main #community-root .community-hero :is(h1, h2, h3, p, .eyebrow) { color: #fff !important; }
html[data-theme="dark"] body #main :is(.primary-button, .chat-send, .community-message.mine p) {
  background: var(--gh-plum-mid) !important;
  border-color: var(--gh-plum-mid) !important;
  color: #fff !important;
}
html[data-theme="dark"] body :is(.secondary-button, .light-button, .icon-button, .game-options button, .memory-grid button, .arcade-dpad button) {
  background: var(--gh-lilac) !important;
  border-color: var(--gh-border) !important;
  color: var(--gh-ink) !important;
}
html[data-theme="dark"] body #main :is(.filter.active, .news-filters button.active, .protective-filters button.active, .community-filters button[aria-pressed="true"], .community-mobile-tabs button[aria-pressed="true"], .admin-tabs button.active, .auth-tabs button.active, .avatar-picker button.selected, .option.selected, .install-platforms button[aria-pressed="true"]) {
  background: var(--gh-plum-mid) !important;
  border-color: var(--gh-plum-mid) !important;
  color: #fff !important;
}
html[data-theme="dark"] body #main :is(.community-message-form, .chat-emoji-grid, .chat-message-options[open]) { background: var(--gh-paper) !important; border-color: var(--gh-border) !important; }
html[data-theme="dark"] body #main :is(.community-message-form textarea, .chat-composer textarea) { background: transparent !important; color: var(--text) !important; }
html[data-theme="dark"] body #main :is(.chat-attach, .chat-emoji-picker summary, .chat-welcome button, .chat-sound-toggle) { background: var(--gh-lilac) !important; border-color: var(--gh-border) !important; color: #fff !important; }
html[data-theme="dark"] body .assistant-launcher, html[data-theme="dark"] body #modal-overlay .assistant-form button { background: var(--gh-plum-mid) !important; border-color: var(--gh-plum-mid) !important; color: #fff !important; }
html[data-theme="dark"] body #modal-overlay .assistant-panel :is(.assistant-intro, .assistant-privacy, .assistant-form label) { color: var(--gh-muted) !important; }
html[data-theme="dark"] body #modal-overlay .assistant-panel .assistant-message.bot { background: var(--gh-lilac) !important; color: var(--gh-ink) !important; }
html[data-theme="dark"] body #modal-overlay .assistant-panel .assistant-message.user { background: var(--gh-plum-mid) !important; color: #fff !important; }
html[data-theme="dark"] body #modal-overlay .assistant-panel .assistant-next { color: var(--gh-coral) !important; }
html[data-theme="dark"] body #modal-overlay .assistant-panel .assistant-topics button { background: var(--gh-paper) !important; border-color: var(--gh-border) !important; color: var(--gh-ink) !important; }
html[data-theme="dark"] body #modal-overlay .assistant-panel .assistant-form input { background: #211b23 !important; color: var(--gh-ink) !important; }
html[data-theme="dark"] body #main :is(.bilan-fun-question, .community-setting-card, .community-setting-help, .community-blocked-empty, .bilan-tip) { background: var(--gh-paper) !important; border-color: var(--gh-border) !important; }
html[data-theme="dark"] body #main :is(.bilan-question-emoji, .bilan-fun-question .option-icon, .community-setting-icon, .community-setting-art) { background: var(--gh-lilac) !important; color: var(--gh-plum) !important; }
html[data-theme="dark"] body #main .bilan-progress-ring { background: conic-gradient(var(--gh-coral) var(--bilan-progress), var(--gh-lilac-strong) 0) !important; }
html[data-theme="dark"] body #main .bilan-fun-question .option:nth-child(n) { background: var(--gh-paper) !important; border-color: var(--gh-border) !important; }
html[data-theme="dark"] body #main .bilan-fun-question .option.selected { background: var(--gh-lilac) !important; border-color: var(--gh-plum) !important; }
html[data-theme="dark"] body #main .bilan-fun-question .option.selected .option-check { background: var(--gh-plum-mid) !important; color: #fff !important; }
html[data-theme="dark"] body #main .bilan-tip { background: var(--gh-lilac) !important; border-color: var(--gh-border) !important; }
html[data-theme="dark"] body #main .bilan-tip summary, html[data-theme="dark"] body #main .bilan-encouragement { color: var(--gh-plum) !important; }
html[data-theme="dark"] body #main #community-root :is(.community-live, .community-weekly, .community-topics button, .community-prompts button, .community-emoji-tools button, .community-reaction-picker button, .community-feed-tools, .community-save[aria-pressed="true"]) {
  background: var(--gh-lilac) !important;
  border-color: var(--gh-border) !important;
  color: var(--gh-ink) !important;
}
html[data-theme="dark"] body #main #community-root .community-weekly { background: linear-gradient(125deg, var(--gh-lilac), #382d3b) !important; }
html[data-theme="dark"] body #main #community-root .community-weekly > button { background: var(--gh-plum-mid) !important; color: #fff !important; }
html[data-theme="dark"] body #main #community-root .community-prompts button:nth-child(2) { background: #382d3b !important; border-color: var(--gh-border) !important; color: var(--gh-ink) !important; }
html[data-theme="dark"] body #main #community-root .community-prompts button:nth-child(3) { background: var(--gh-lilac) !important; border-color: var(--gh-border) !important; color: var(--gh-ink) !important; }
html[data-theme="dark"] body #main #community-root .community-post:nth-child(3n+2) { border-top-color: var(--gh-coral) !important; }
html[data-theme="dark"] body #main #community-root .community-post:nth-child(3n) { border-top-color: var(--gh-plum-mid) !important; }
html[data-theme="dark"] body #main .community-setting-badge { background: var(--gh-lilac) !important; color: var(--gh-ink) !important; }
html[data-theme="dark"] body #main .reviews-panel { --review-brown: var(--gh-plum); --review-ink: var(--gh-ink); --review-muted: var(--gh-muted); --review-line: var(--gh-border); --review-paper: var(--gh-paper); background: var(--gh-paper) !important; border-color: var(--gh-border) !important; color: var(--text) !important; }
html[data-theme="dark"] body #main .reviews-panel :is(.reviews-score, .reviews-write, .review-entry) { background: var(--gh-lilac) !important; border-color: var(--gh-border) !important; }
html[data-theme="dark"] body #main .reviews-panel :is(.reviews-score-stars, .reviews-write-icon) { color: var(--gh-coral) !important; }
html[data-theme="dark"] body :is(input, textarea, select) { background-color: #211b23 !important; color: var(--gh-ink) !important; border-color: var(--gh-border) !important; }
html[data-theme="dark"] body #main :is(.coin-badge, .art-sticker, .tag, .texture-badge, .product-tag) { background: var(--gh-lilac) !important; border-color: var(--gh-border) !important; color: var(--gh-coral) !important; }
html[data-theme="dark"] body :is(input[type="checkbox"], input[type="radio"], progress) { accent-color: var(--gh-plum) !important; }
html[data-theme="dark"] body .topbar .preference-controls button[data-action="theme"] { background: var(--gh-lilac) !important; color: #fff !important; }

@media (prefers-reduced-motion: reduce) {
  html body :is(.primary-button, .secondary-button) { transition: none !important; }
}