/*
 * SAMDAN CHURCH — CENTRAL COLOR SETTINGS
 * Edit section 1 only for a site-wide recolor (desktop + mobile).
 * All pages load this file after style.css. No per-page color edits needed.
 * See MAINTENANCE.md → Theme Colors for examples and readability checks.
 */
:root {
  /* 1. EDITABLE SETTINGS ----------------------------------------------- */

  /* Main theme: fig, fired clay, limestone, and evergreen. */
  --brand: #3d2638;
  --brand-dark: #251622;
  --accent: #a84434;
  --accent-hover: #b24c3b;
  --accent-dark: #7e3027;
  --accent-fill: #c2745d;
  --accent-soft: #f3ddd7;
  --accent-on-dark: #f5c3b7;
  --evergreen: #40594e;
  --evergreen-dark: #2c4138;
  --evergreen-soft: #e1e8e3;
  --evergreen-highlight: #3f877c;

  /* Page/card surfaces and readable text. */
  --paper: #f5f1e8;
  --surface: #fffcf7;
  --soft: #e9e3da;
  --surface-bright: #ffffff;
  --ink: #241f20;
  --ink-strong: #1b1718;
  --muted: #68615f;
  --text-on-dark: #ffffff;
  --shadow-color: #000000;

  /* Distinct light section surfaces; independent of hero/footer and buttons. */
  --content-bg: var(--paper);
  --content-alt-bg: var(--soft);
  --content-third-bg: var(--evergreen-soft);
  --content-panel-bg: color-mix(in srgb, var(--surface) 65%, var(--paper));
  --content-feature-bg: var(--soft);
  --section-ministries-bg: var(--paper);
  --section-events-bg: var(--soft);
  --section-announcements-bg: var(--evergreen-soft);
  --section-leadership-bg: var(--evergreen-soft);
  --content-text: var(--ink);
  --content-heading: var(--brand);
  --content-muted: var(--muted);
  --content-accent: var(--accent-dark);
  --content-border: var(--line);
  --content-support-bg: var(--evergreen-soft);
  --content-support-text: var(--evergreen-dark);

  /* Rust labels never invert; a light backing keeps them readable on green. */
  --label-accent: var(--content-accent);
  --label-active-bg: var(--content-panel-bg);
  --label-padding-block: 0.2rem;
  --label-padding-inline: 0.4rem;
  --label-gap: 0.65rem;

  /* Individual J.E.S.U.S boxes stay visible before hover, including mobile. */
  --mission-card-bg: var(--paper);
  --mission-card-border: color-mix(in srgb, var(--brand) 22%, transparent);
  --mission-card-shadow: var(--shadow);

  /* Clear evergreen hover/selected cards, with paired readable foregrounds. */
  --card-active-bg: var(--evergreen);
  --card-active-text: var(--text-on-dark);
  --card-active-muted: color-mix(in srgb, var(--text-on-dark) 92%, var(--card-active-bg));
  --card-active-accent: var(--text-on-dark);
  --card-active-border: var(--evergreen-dark);
  --card-active-inset-bg: color-mix(in srgb, var(--text-on-dark) 8%, var(--card-active-bg));
  --card-active-inset-border: color-mix(in srgb, var(--text-on-dark) 25%, transparent);

  /* Stable weekday headers: never depend on hover, including touch screens. */
  --calendar-header-bg: var(--evergreen-dark);
  --calendar-header-text: var(--text-on-dark);
  --calendar-header-active-bg: var(--calendar-header-bg);
  --calendar-header-active-text: var(--calendar-header-text);
  --calendar-header-muted: color-mix(in srgb, var(--calendar-header-text) 88%, var(--calendar-header-bg));
  --calendar-shell-bg: var(--paper);
  --calendar-shell-open-bg: var(--evergreen-soft);
  --calendar-shell-border: color-mix(in srgb, var(--evergreen-dark) 25%, var(--paper));
  --calendar-shell-open-border: var(--evergreen);
  /* Calm event panels and smaller rust titles stay readable in every state. */
  --calendar-event-bg: var(--content-panel-bg);
  --calendar-event-title: var(--label-accent);
  --calendar-event-text: var(--content-muted);
  --calendar-event-border: var(--content-border);

  /* ONE control for every hero and footer. Footer uses a darker shade.
   * Change this to a hex color; leave the derived tokens in section 2 alone.
   */
  --hero-footer-bg: var(--brand);

  /* Primary buttons and form submit buttons: dark text at rest. */
  --button-primary-bg: var(--accent-fill);
  --button-primary-text: var(--ink-strong);

  /* Selected tabs/filters follow primary unless you set other colors here. */
  --button-selected-bg: var(--button-primary-bg);
  --button-selected-text: var(--button-primary-text);

  /* Every enabled action shares these hover / keyboard focus colors. */
  --button-hover-bg: var(--accent-hover);
  --button-hover-text: #ffffff;
  --button-pressed-bg: var(--accent-dark);
  --button-pressed-text: #ffffff;

  /* Secondary buttons keep an outlined or quiet resting style. */
  --button-secondary-text: var(--brand);
  --button-secondary-bg: transparent;
  --button-ghost-bg: color-mix(in srgb, var(--surface) 78%, transparent);
  --button-secondary-border: color-mix(in srgb, var(--brand) 38%, transparent);
  --button-ghost-border: color-mix(in srgb, var(--brand) 26%, transparent);
  --button-on-dark-text: var(--text-on-dark);
  --button-on-dark-bg: color-mix(in srgb, var(--surface-bright) 10%, transparent);
  --button-on-dark-border: color-mix(in srgb, var(--surface-bright) 58%, transparent);

  --button-disabled-bg: var(--soft);
  --button-disabled-text: color-mix(in srgb, var(--ink) 76%, transparent);
  --button-disabled-border: var(--line);
  --focus-light: var(--accent);
  --focus-dark: var(--accent-on-dark);
  --selection-bg: var(--accent);
  --selection-text: var(--text-on-dark);
  --nav-icon: color-mix(in srgb, var(--brand) 90%, transparent);
  --browser-theme-color: var(--brand);

  /* 2. DERIVED TOKENS — normally leave these alone ---------------------
   * Existing components use these aliases. Legacy gradient tones below
   * are mixed from the editable palette, so they follow future recolors.
   */
  --cream: var(--paper);
  --gold: var(--accent);
  --button-primary-fill: var(--button-primary-bg);
  --button-primary-ink: var(--button-primary-text);
  --line: color-mix(in srgb, var(--brand) 14%, transparent);
  --shadow: 0 8px 24px color-mix(in srgb, var(--brand-dark) 6%, transparent);
  --hero-footer-shade: color-mix(in srgb, var(--hero-footer-bg) 60%, var(--shadow-color));
  --hero-footer-gradient: linear-gradient(110deg, var(--hero-footer-shade), var(--hero-footer-bg) 80%);
  --editorial-tone-01: color-mix(in srgb, var(--brand-dark) 73.147%, var(--shadow-color));
  --editorial-tone-02: color-mix(in srgb, color-mix(in srgb, var(--ink) 17.176%, var(--brand)) 95.769%, var(--evergreen));
  --editorial-tone-03: color-mix(in srgb, color-mix(in srgb, var(--accent-hover) 6.386%, var(--accent-soft)) 49.088%, var(--accent-fill));
  --editorial-tone-04: color-mix(in srgb, color-mix(in srgb, var(--brand) 97.176%, var(--accent-hover)) 81.306%, var(--surface-bright));
  --editorial-tone-05: color-mix(in srgb, color-mix(in srgb, var(--accent-dark) 90.631%, var(--accent-fill)) 79.718%, var(--ink-strong));
  --forest-tone-06: color-mix(in srgb, color-mix(in srgb, var(--accent-on-dark) 11.962%, var(--evergreen)) 83.882%, var(--evergreen-highlight));
  --editorial-tone-07: color-mix(in srgb, var(--accent-dark) 79.108%, var(--shadow-color));
  --editorial-tone-08: color-mix(in srgb, color-mix(in srgb, var(--accent-hover) 95.741%, var(--accent-on-dark)) 83.977%, var(--accent-fill));
  --forest-tone-09: color-mix(in srgb, color-mix(in srgb, var(--evergreen) 30.364%, var(--evergreen-dark)) 92.717%, var(--evergreen-highlight));
  --forest-tone-10: color-mix(in srgb, var(--evergreen-highlight) 43.721%, var(--shadow-color));
  --editorial-tone-11: color-mix(in srgb, color-mix(in srgb, var(--accent-hover) 18.487%, var(--accent-on-dark)) 99.798%, var(--accent-fill));
  --editorial-tone-12: color-mix(in srgb, color-mix(in srgb, var(--paper) 3.699%, var(--brand)) 92.378%, var(--evergreen-dark));
  --editorial-tone-13: color-mix(in srgb, color-mix(in srgb, var(--brand) 81.323%, var(--accent-hover)) 96.726%, var(--surface-bright));
  --editorial-tone-14: color-mix(in srgb, color-mix(in srgb, var(--soft) 99.026%, var(--accent-on-dark)) 77.68%, var(--surface-bright));
  --forest-tone-15: color-mix(in srgb, color-mix(in srgb, var(--surface) 65.006%, var(--evergreen-highlight)) 24.807%, var(--surface-bright));
  --forest-tone-16: color-mix(in srgb, color-mix(in srgb, var(--evergreen-dark) 86.785%, var(--evergreen-highlight)) 97.367%, var(--surface-bright));
  --editorial-tone-17: color-mix(in srgb, color-mix(in srgb, var(--brand) 95.258%, var(--accent-hover)) 82.575%, var(--surface-bright));
  --editorial-tone-18: color-mix(in srgb, color-mix(in srgb, var(--muted) 17.375%, var(--brand)) 97.413%, var(--accent-on-dark));
  --editorial-tone-19: color-mix(in srgb, color-mix(in srgb, var(--brand) 95.099%, var(--evergreen-highlight)) 89.574%, var(--surface-bright));
  --editorial-tone-20: color-mix(in srgb, color-mix(in srgb, var(--accent-hover) 65.261%, var(--accent-on-dark)) 89.432%, var(--accent-fill));
  --editorial-tone-21: color-mix(in srgb, var(--brand-dark) 84.048%, var(--shadow-color));
  --editorial-tone-22: color-mix(in srgb, color-mix(in srgb, var(--brand) 69.054%, var(--brand-dark)) 94.493%, var(--evergreen-soft));
  --forest-tone-23: color-mix(in srgb, color-mix(in srgb, var(--evergreen-dark) 97.606%, var(--evergreen-soft)) 95.452%, var(--evergreen-highlight));
  --editorial-tone-24: color-mix(in srgb, color-mix(in srgb, var(--brand) 98.081%, var(--evergreen-highlight)) 80.276%, var(--shadow-color));
  --editorial-tone-25: color-mix(in srgb, color-mix(in srgb, var(--accent-hover) 15.593%, var(--accent-on-dark)) 75.331%, var(--accent-fill));
  --editorial-tone-26: color-mix(in srgb, color-mix(in srgb, var(--accent-hover) 8.532%, var(--accent-on-dark)) 77.557%, var(--accent-fill));
  --editorial-tone-27: color-mix(in srgb, var(--evergreen-highlight) 19.734%, var(--shadow-color));
  --forest-tone-28: color-mix(in srgb, color-mix(in srgb, var(--brand-dark) 47.083%, var(--accent-hover)) 39.083%, var(--evergreen-highlight));
  --editorial-tone-29: color-mix(in srgb, color-mix(in srgb, var(--soft) 6.446%, var(--brand)) 99.036%, var(--evergreen-highlight));
  --editorial-tone-30: color-mix(in srgb, color-mix(in srgb, var(--brand) 96.839%, var(--accent-hover)) 76.382%, var(--surface-bright));
  --forest-tone-31: color-mix(in srgb, color-mix(in srgb, var(--evergreen) 69.737%, var(--evergreen-soft)) 86.935%, var(--shadow-color));
  --editorial-tone-32: color-mix(in srgb, color-mix(in srgb, var(--brand) 95.559%, var(--evergreen-highlight)) 85.63%, var(--surface-bright));
  --editorial-tone-33: color-mix(in srgb, color-mix(in srgb, var(--brand) 99.081%, var(--evergreen-highlight)) 76.26%, var(--surface-bright));
  --forest-tone-34: color-mix(in srgb, color-mix(in srgb, var(--accent-on-dark) 18.362%, var(--evergreen)) 78.864%, var(--evergreen-highlight));
  --forest-tone-35: color-mix(in srgb, color-mix(in srgb, var(--accent-hover) 34.132%, var(--evergreen)) 47.609%, var(--evergreen-highlight));
  --editorial-tone-36: color-mix(in srgb, var(--surface-bright) 23.715%, var(--brand));
  --editorial-tone-37: color-mix(in srgb, var(--surface-bright) 14.422%, var(--brand));
  --editorial-tone-38: color-mix(in srgb, var(--surface-bright) 21.625%, var(--brand));
  --editorial-tone-39: color-mix(in srgb, color-mix(in srgb, var(--brand) 97.912%, var(--accent-hover)) 85.72%, var(--surface-bright));
  --editorial-tone-40: color-mix(in srgb, color-mix(in srgb, var(--paper) 97.771%, var(--evergreen-highlight)) 93.737%, var(--accent-fill));
  --editorial-tone-41: color-mix(in srgb, color-mix(in srgb, var(--paper) 11.465%, var(--brand)) 68.748%, var(--brand-dark));
  --editorial-tone-42: color-mix(in srgb, color-mix(in srgb, var(--brand) 97.137%, var(--accent-hover)) 73.995%, var(--surface-bright));
  --forest-tone-43: color-mix(in srgb, color-mix(in srgb, var(--brand-dark) 16.789%, var(--evergreen-highlight)) 75.354%, var(--accent-fill));
  --forest-tone-44: color-mix(in srgb, color-mix(in srgb, var(--accent-dark) 3.184%, var(--evergreen)) 83.056%, var(--surface-bright));
  --forest-tone-45: color-mix(in srgb, color-mix(in srgb, var(--accent-dark) 0.732%, var(--evergreen-dark)) 75.388%, var(--evergreen-soft));
  --editorial-tone-46: color-mix(in srgb, color-mix(in srgb, var(--brand) 96.315%, var(--evergreen-highlight)) 76.943%, var(--shadow-color));
  --editorial-tone-47: color-mix(in srgb, color-mix(in srgb, var(--brand) 95.688%, var(--accent-hover)) 79.474%, var(--surface-bright));
  --editorial-tone-48: color-mix(in srgb, color-mix(in srgb, var(--accent-hover) 78.628%, var(--accent-on-dark)) 78.42%, var(--accent-fill));
  --editorial-tone-49: color-mix(in srgb, color-mix(in srgb, var(--brand) 62.894%, var(--brand-dark)) 87.837%, var(--evergreen-dark));
  --editorial-tone-50: color-mix(in srgb, color-mix(in srgb, var(--muted) 21.243%, var(--brand)) 97.695%, var(--accent-fill));
  --editorial-tone-51: color-mix(in srgb, color-mix(in srgb, var(--brand) 98.317%, var(--accent-hover)) 75.583%, var(--surface-bright));
  --forest-tone-52: color-mix(in srgb, color-mix(in srgb, var(--surface) 51.308%, var(--accent-hover)) 41.422%, var(--evergreen-highlight));
  --editorial-tone-53: color-mix(in srgb, color-mix(in srgb, var(--accent-dark) 24.582%, var(--evergreen-soft)) 50.333%, var(--shadow-color));
  --editorial-tone-54: color-mix(in srgb, color-mix(in srgb, var(--brand) 32.497%, var(--brand-dark)) 98.134%, var(--evergreen-highlight));
  --forest-tone-55: color-mix(in srgb, var(--evergreen-highlight) 90.061%, var(--shadow-color));
  --forest-tone-56: color-mix(in srgb, color-mix(in srgb, var(--evergreen-dark) 88.24%, var(--evergreen-highlight)) 73.597%, var(--shadow-color));
  --forest-tone-57: color-mix(in srgb, var(--surface-bright) 67.709%, var(--evergreen-highlight));
  --editorial-tone-58: color-mix(in srgb, var(--evergreen-highlight) 33.138%, var(--shadow-color));
  --forest-tone-59: color-mix(in srgb, color-mix(in srgb, var(--surface) 63.932%, var(--evergreen-highlight)) 41.478%, var(--surface-bright));
  --forest-tone-60: color-mix(in srgb, var(--evergreen-highlight) 4.2%, var(--surface-bright));
  --forest-tone-61: color-mix(in srgb, color-mix(in srgb, var(--evergreen-dark) 86.658%, var(--evergreen-highlight)) 92.525%, var(--shadow-color));
  --editorial-tone-62: color-mix(in srgb, var(--evergreen-highlight) 26.455%, var(--shadow-color));
  --editorial-tone-63: color-mix(in srgb, color-mix(in srgb, var(--brand) 97.506%, var(--accent-hover)) 84.997%, var(--surface-bright));
  --editorial-tone-64: color-mix(in srgb, color-mix(in srgb, var(--brand-dark) 96.743%, var(--evergreen-highlight)) 88.824%, var(--shadow-color));
  --editorial-tone-65: color-mix(in srgb, color-mix(in srgb, var(--muted) 98.309%, var(--accent-fill)) 85.29%, var(--shadow-color));
  --editorial-tone-66: color-mix(in srgb, color-mix(in srgb, var(--brand) 92.304%, var(--accent-hover)) 85.602%, var(--surface-bright));
  --editorial-tone-67: color-mix(in srgb, color-mix(in srgb, var(--brand) 96.613%, var(--accent-hover)) 94.646%, var(--surface-bright));
  --editorial-tone-68: color-mix(in srgb, var(--accent-hover) 29.239%, var(--accent-on-dark));
  --editorial-tone-69: color-mix(in srgb, color-mix(in srgb, var(--brand) 44.113%, var(--brand-dark)) 97.195%, var(--evergreen-highlight));
  --editorial-tone-70: color-mix(in srgb, color-mix(in srgb, var(--brand) 85.202%, var(--evergreen-highlight)) 80.832%, var(--surface-bright));
  --editorial-tone-71: color-mix(in srgb, color-mix(in srgb, var(--brand) 90.57%, var(--accent-hover)) 93.859%, var(--surface-bright));
  --editorial-tone-72: color-mix(in srgb, color-mix(in srgb, var(--brand-dark) 97.672%, var(--evergreen-highlight)) 74.799%, var(--shadow-color));
  --editorial-tone-73: color-mix(in srgb, color-mix(in srgb, var(--brand) 70.771%, var(--accent-hover)) 87.674%, var(--surface-bright));
  --editorial-tone-74: color-mix(in srgb, color-mix(in srgb, var(--brand) 91.085%, var(--accent-hover)) 91.756%, var(--surface-bright));
  --editorial-tone-75: color-mix(in srgb, color-mix(in srgb, var(--brand-dark) 98.583%, var(--evergreen-highlight)) 51.077%, var(--shadow-color));
  --editorial-tone-76: color-mix(in srgb, color-mix(in srgb, var(--brand) 87.652%, var(--evergreen-highlight)) 83.681%, var(--surface-bright));
  --forest-tone-77: color-mix(in srgb, color-mix(in srgb, var(--surface) 76.122%, var(--brand-dark)) 19.443%, var(--evergreen));
  --forest-tone-78: color-mix(in srgb, color-mix(in srgb, var(--brand-dark) 51.56%, var(--accent-hover)) 44.92%, var(--evergreen-highlight));
  --editorial-tone-79: color-mix(in srgb, color-mix(in srgb, var(--brand) 21.101%, var(--brand-dark)) 99.073%, var(--evergreen-highlight));
  --editorial-tone-80: color-mix(in srgb, color-mix(in srgb, var(--brand) 92.104%, var(--accent-soft)) 95.624%, var(--evergreen-dark));
  --editorial-tone-81: color-mix(in srgb, var(--brand-dark) 89.498%, var(--shadow-color));
  --editorial-tone-82: color-mix(in srgb, color-mix(in srgb, var(--paper) 65.061%, var(--surface)) 96.929%, var(--brand-dark));
  --editorial-tone-83: color-mix(in srgb, color-mix(in srgb, var(--brand) 98.134%, var(--accent-on-dark)) 66.857%, var(--ink-strong));
  --editorial-tone-84: color-mix(in srgb, color-mix(in srgb, var(--brand) 88.356%, var(--evergreen-soft)) 90.466%, var(--ink-strong));
  --forest-tone-85: color-mix(in srgb, color-mix(in srgb, var(--accent-dark) 52.832%, var(--accent-on-dark)) 40.292%, var(--evergreen-highlight));
  --editorial-tone-86: color-mix(in srgb, color-mix(in srgb, var(--surface) 12.741%, var(--brand)) 85.176%, var(--ink-strong));
  --forest-tone-87: color-mix(in srgb, color-mix(in srgb, var(--evergreen) 76.803%, var(--evergreen-soft)) 97.137%, var(--accent-fill));
  --editorial-tone-88: color-mix(in srgb, color-mix(in srgb, var(--brand) 97.614%, var(--accent-hover)) 94.562%, var(--surface-bright));
  --forest-tone-89: color-mix(in srgb, color-mix(in srgb, var(--evergreen) 37.243%, var(--evergreen-dark)) 95.145%, var(--evergreen-highlight));
  --editorial-tone-90: color-mix(in srgb, color-mix(in srgb, var(--brand) 97.907%, var(--accent-hover)) 96.957%, var(--surface-bright));
  --editorial-tone-91: color-mix(in srgb, color-mix(in srgb, var(--brand-dark) 97.943%, var(--evergreen-highlight)) 82.949%, var(--shadow-color));
  --editorial-tone-92: color-mix(in srgb, color-mix(in srgb, var(--accent-hover) 53.306%, var(--accent-on-dark)) 38.218%, var(--accent-fill));
  --editorial-tone-93: color-mix(in srgb, color-mix(in srgb, var(--brand) 3.463%, var(--accent)) 44.107%, var(--accent-dark));
  --forest-tone-94: color-mix(in srgb, color-mix(in srgb, var(--brand) 2.628%, var(--evergreen)) 88.433%, var(--surface-bright));
  --forest-tone-95: color-mix(in srgb, var(--evergreen-highlight) 79.84%, var(--shadow-color));
  --editorial-tone-96: color-mix(in srgb, color-mix(in srgb, var(--brand) 24.876%, var(--brand-dark)) 98.76%, var(--evergreen-highlight));
  --editorial-tone-97: color-mix(in srgb, color-mix(in srgb, var(--surface) 3.865%, var(--brand)) 88.932%, var(--evergreen));
  --forest-tone-98: color-mix(in srgb, color-mix(in srgb, var(--accent-soft) 7.37%, var(--evergreen-dark)) 92.347%, var(--evergreen-highlight));
  --editorial-tone-99: color-mix(in srgb, color-mix(in srgb, var(--accent-soft) 86.445%, var(--evergreen)) 44.802%, var(--shadow-color));
  --editorial-tone-100: color-mix(in srgb, color-mix(in srgb, var(--accent-hover) 12.727%, var(--accent-on-dark)) 68.436%, var(--accent-fill));
  --editorial-tone-101: color-mix(in srgb, color-mix(in srgb, var(--brand) 43.331%, var(--brand-dark)) 94.956%, var(--evergreen-highlight));
}