/*
 * appearance.css
 *
 * Device-local appearance preferences. The current dark theme remains the
 * default; data attributes on <html> select Light or High Contrast plus one of
 * a small set of vetted accent palettes.
 */

html {
  color-scheme: dark;
}

html[data-appearance='light'] {
  color-scheme: light;
}

html[data-appearance='contrast'] {
  color-scheme: dark;
}

/* Common surfaces that still use historical literal dark colors elsewhere. */
html[data-appearance='light'] .contact-card,
html[data-appearance='light'] .privacy-note,
html[data-appearance='light'] input[type='text'],
html[data-appearance='light'] input[type='password'],
html[data-appearance='light'] input[type='number'],
html[data-appearance='light'] input[type='url'],
html[data-appearance='light'] input[type='email'],
html[data-appearance='light'] input[type='search'],
html[data-appearance='light'] textarea,
html[data-appearance='light'] select,
html[data-appearance='light'] .image-upload-box,
html[data-appearance='light'] .instruction-image-dropzone {
  background: var(--control-bg);
  border-color: var(--border-soft);
}

/*
 * A number of older view styles predate color tokens and contain literal
 * near-white text/surfaces. Those values look correct on the default dark
 * theme but become too faint on a light background. Keep the compatibility
 * correction here so the appearance layer remains responsible for themes.
 */
html[data-appearance='light'] .site-title,
html[data-appearance='light'] .recipe-title,
html[data-appearance='light'] .meta-value,
html[data-appearance='light'] .instruction-section-title,
html[data-appearance='light'] .recipe-description,
html[data-appearance='light'] .recipe-story,
html[data-appearance='light'] .recipe-notes,
html[data-appearance='light'] .recipe-source,
html[data-appearance='light'] .recipe-nutrition,
html[data-appearance='light'] .contact-card h1,
html[data-appearance='light'] .error-message a {
  color: var(--text);
}

html[data-appearance='light'] .site-subtitle,
html[data-appearance='light'] .site-search input[type='search']::placeholder {
  color: var(--muted);
}

html[data-appearance='light'] .recipe-meta-table,
html[data-appearance='light'] .meta-cell,
html[data-appearance='light'] .section-block {
  background: var(--surface-soft);
  border-color: var(--border-soft);
}

html[data-appearance='light'] .meta-cell:hover {
  background: var(--accent-wash);
}

/* The editor jump navigation predates appearance tokens and otherwise keeps its
 * dark literal surface around Light-mode text. Move the whole component onto
 * shared Light tokens while leaving the default and High Contrast rules alone. */
html[data-appearance='light'] .recipe-editor-section-nav {
  background: var(--menu-bg);
  border-color: var(--border-soft);
  box-shadow: var(--menu-shadow);
}

html[data-appearance='light'] .recipe-editor-section-nav-link {
  background: var(--control-bg);
  border-color: var(--border-soft);
  color: var(--text);
}

html[data-appearance='light'] .recipe-editor-section-nav-link:hover,
html[data-appearance='light'] .recipe-editor-section-nav-link:focus-visible {
  background: var(--accent-wash);
  border-color: var(--accent);
  color: var(--accent-light);
}

html[data-appearance='light'] .site-search-scope,
html[data-appearance='light'] .site-search input[type='search'] {
  background: var(--control-bg);
  border-color: var(--border-soft);
}

html[data-appearance='light'] .site-search-scope option {
  background: var(--menu-bg);
  color: var(--text);
}

/* The autocomplete popup still uses the original theme's literal dark menu
 * surface in header.css. In Light mode, move the entire popup onto the shared
 * light menu tokens so result names, categories, and hover states remain
 * readable together. */
html[data-appearance='light'] .autocomplete-results {
  background: var(--menu-bg);
  border-color: var(--border-soft);
  box-shadow: var(--menu-shadow);
}

html[data-appearance='light'] .autocomplete-item {
  color: var(--text);
  border-bottom-color: var(--border-soft);
}

html[data-appearance='light'] .autocomplete-item:hover,
html[data-appearance='light'] .autocomplete-item:focus,
html[data-appearance='light'] .autocomplete-item.is-active {
  background: var(--accent-wash);
  color: var(--text);
}

html[data-appearance='light'] .autocomplete-item-category,
html[data-appearance='light'] .autocomplete-no-results {
  color: var(--muted);
}

html[data-appearance='light'] .privacy-note {
  color: var(--text);
}

html[data-appearance='light'] .account-menu-panel {
  background: var(--menu-bg);
  border-color: var(--border-soft);
  box-shadow: var(--menu-shadow);
}

/* On desktop the primary nav is only a flex layout wrapper. Giving that
 * wrapper the light menu surface makes the gaps between accent buttons appear
 * as white stripes. Let the site-header surface show through instead. The
 * mobile dropdown remains a real menu surface below. */
@media (min-width: 721px) {
  html[data-appearance='light'] .site-nav-primary {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }
}

@media (max-width: 720px) {
  html[data-appearance='light'] .site-nav-primary {
    background: var(--menu-bg);
    border-color: var(--border-soft);
    box-shadow: var(--menu-shadow);
  }
}

/* The account flyout sits inside .site-nav, whose global link rule fills links
 * with the accent color. In Light mode the flyout should instead be a clear
 * light surface with dark text and an accent-tinted hover state. */
html[data-appearance='light'] .account-menu-panel a,
html[data-appearance='light'] .account-menu-action {
  background: var(--menu-bg);
  color: var(--text);
  border-bottom-color: var(--border-soft);
}

html[data-appearance='light'] .account-menu-panel a:hover,
html[data-appearance='light'] .account-menu-panel a:focus,
html[data-appearance='light'] .account-menu-action:hover,
html[data-appearance='light'] .account-menu-action:focus {
  background: var(--accent-wash);
  color: var(--text);
}

/* The fallback account initial sits on an accent-colored button. Use an opaque
 * light disc and dark accent text so the initial remains legible with every
 * light-mode accent palette. */
html[data-appearance='light'] .account-menu-avatar-fallback {
  background: #fff;
  border: 2px solid var(--accent-dark);
  color: var(--accent-dark);
}

/* Sidebar recipe links still use a historical near-white literal in
 * categories.css. Override it in Light mode so expanded category contents,
 * favorites, recently viewed items, and search results remain readable. */
html[data-appearance='light'] .recipe-link {
  color: var(--text);
}

html[data-appearance='light'] .recipe-link:hover,
html[data-appearance='light'] .recipe-link:focus-visible {
  background: var(--accent-wash);
  color: var(--accent-light);
}

/* Personal shortcut glyphs and counts need stronger Light-mode contrast, but
 * their existing font size/line height are intentionally preserved so rows do
 * not grow or shift. */
html[data-appearance='light'] .favorite-category-heart,
html[data-appearance='light'] .want-to-try-heading-icon,
html[data-appearance='light'] .recently-viewed-title-icon {
  color: #bf2038;
  font-weight: 900;
  filter: saturate(1.18) contrast(1.12);
}

html[data-appearance='light'] .favorite-category-count,
html[data-appearance='light'] .want-to-try-category-count,
html[data-appearance='light'] .recently-viewed-count {
  background: rgba(150, 20, 42, 0.13);
  color: #811427;
}

/* Notification counts need a fully opaque, high-contrast treatment on light
 * surfaces. The shared semantic token backgrounds are intentionally subtle and
 * leave white count text washed out in Light mode. */
html[data-appearance='light'] .header-notification-badge-online,
html[data-appearance='light'] .account-menu-badge-online {
  background: #246b3b;
  border-color: #184b29;
  color: #fff;
}

html[data-appearance='light'] .header-notification-badge-pending,
html[data-appearance='light'] .account-menu-badge-pending {
  background: #a82b36;
  border-color: #741d25;
  color: #fff;
}

html[data-appearance='light'] .recipe-favorite-button.is-not-favorited .recipe-favorite-heart {
  color: #fff;
  opacity: 1;
  -webkit-text-stroke: 0.35px #fff;
}

html[data-appearance='light'] .recipe-favorite-button.is-not-favorited .recipe-want-to-try-shape {
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linejoin: round;
}

html[data-appearance='light'] .recipe-scale-button.is-active {
  color: #fff;
}

/* Recipe action icons keep their original dimensions; only weight/contrast is
 * strengthened so pill-button height and spacing remain unchanged. */
.recipe-favorite-heart {
  font-weight: 900;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.35);
}

.recipe-favorite-button.is-not-favorited .recipe-favorite-heart {
  color: #fff;
  opacity: 0.82;
}

/* High contrast deliberately favors legibility over decorative shading. */
html[data-appearance='contrast'] *,
html[data-appearance='contrast'] *::before,
html[data-appearance='contrast'] *::after {
  text-shadow: none !important;
}

html[data-appearance='contrast'] body,
html[data-appearance='contrast'] .site-header,
html[data-appearance='contrast'] .account-menu-panel,
html[data-appearance='contrast'] .site-nav-primary,
html[data-appearance='contrast'] .contact-card,
html[data-appearance='contrast'] .privacy-note,
html[data-appearance='contrast'] input,
html[data-appearance='contrast'] textarea,
html[data-appearance='contrast'] select,
html[data-appearance='contrast'] button,
html[data-appearance='contrast'] .button-link,
html[data-appearance='contrast'] .recipe-card,
html[data-appearance='contrast'] .section-block {
  background-color: #000 !important;
  color: #fff;
}

html[data-appearance='contrast'] a,
html[data-appearance='contrast'] label,
html[data-appearance='contrast'] .site-title,
html[data-appearance='contrast'] .site-subtitle {
  color: #fff;
}

/*
 * Primary navigation links inherit the fixed high-contrast yellow accent from
 * buttons.css. Yellow needs dark text; the account flyout is kept black/white
 * until hover/focus so the menu is easy to scan instead of becoming a solid
 * yellow block.
 */
html[data-appearance='contrast'] .site-nav-primary > a {
  color: #000 !important;
}

html[data-appearance='contrast'] .account-menu-panel a,
html[data-appearance='contrast'] .account-menu-action {
  background: #000 !important;
  color: #fff !important;
  border-bottom-color: #fff !important;
}

html[data-appearance='contrast'] .account-menu-panel a:hover,
html[data-appearance='contrast'] .account-menu-panel a:focus,
html[data-appearance='contrast'] .account-menu-action:hover,
html[data-appearance='contrast'] .account-menu-action:focus {
  background: #ffea00 !important;
  color: #000 !important;
}

html[data-appearance='contrast'] input,
html[data-appearance='contrast'] textarea,
html[data-appearance='contrast'] select,
html[data-appearance='contrast'] button,
html[data-appearance='contrast'] .button-link,
html[data-appearance='contrast'] .contact-card,
html[data-appearance='contrast'] .recipe-card,
html[data-appearance='contrast'] .section-block,
html[data-appearance='contrast'] .account-menu-panel,
html[data-appearance='contrast'] .site-nav-primary {
  border-color: #fff !important;
}

html[data-appearance='contrast'] :focus-visible {
  outline: 3px solid #ffea00 !important;
  outline-offset: 2px;
  box-shadow: none !important;
}

/* Appearance settings page. */
.appearance-settings {
  max-width: 720px;
  margin: 2rem auto;
}

.appearance-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.appearance-option-card {
  padding: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--surface-soft);
}

.appearance-option-card label {
  margin-bottom: 0.45rem;
}

.appearance-accent-preview {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  margin-right: 0.4rem;
  border-radius: 999px;
  background: var(--accent);
  border: 1px solid currentColor;
  vertical-align: -0.08rem;
}

.appearance-settings-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.appearance-status {
  color: var(--muted);
}

@media (max-width: 640px) {
  .appearance-settings-grid {
    grid-template-columns: 1fr;
  }
}