/********************************************************************************************************************//*
 * Dark colour scheme + contrast fixes
 *
 * Reported by a reader (Asana "accessibility issue flagged by reader"): with the Dark Reader
 * extension the footer terms-of-service block rendered white text on the Tyee yellow, i.e.
 * unreadable. Cause: the yellow bands are an extremely light background (#ffd000) paired with
 * pure black text, so Dark Reader has to move both ends a long way; its Brightness slider then
 * pushes the recoloured text past pure white while the yellow, which has enormous brightness
 * headroom, climbs back to almost the original hue. At brightness ~155 that lands on white on
 * #f6bd00 — 1.7:1.
 *
 * Fix: ship a real dark scheme so extensions have something sane to use, and declare
 * darkreader-lock (see tyee_page_attachments()) so Dark Reader stands down and uses it.
***********************************************************************************************************************/

/*
 * Light mode: link colour inside the yellow bands.
 * #e74117 on #ffd000 is 2.76:1 and fails WCAG AA (4.5:1). #a82c0b is 4.71:1 and sits in the
 * existing palette — it is the colour already used for the link underline (#8a270e) family.
 */
footer a,
#faq a,
#featurettes1 a,
#featurettes2 a {
  color: #a82c0b;
  border-bottom-color: #a82c0b;
}

@media (prefers-color-scheme: dark) {

  body,
  .main {
    background-color: #1b1b1b;
    color: #e9e9e9;
  }

  a {
    color: #ff9e75;
    border-bottom-color: #ff9e75;
  }
  a:hover {
    color: #ffffff;
    border-bottom-color: #ffffff;
  }

  /*
   * The header band keeps the Tyee yellow: tyeebuilders.svg is black ink on transparent, so a dark
   * header would erase the logo. Black on #ffd000 is 14.27:1, correct in either scheme.
   */
  header {
    background: #ffd000;
  }

  /*
   * The footer/FAQ bands are the large surfaces, so they drop to a deep Tyee amber instead of
   * staying a full-brightness glare. #ffe27a on #3b2f00 is 10.3:1.
   */
  footer,
  #faq,
  #featurettes1,
  #featurettes2 {
    background: #3b2f00;
    color: #ffe27a;
  }
  footer a,
  #faq a,
  #featurettes1 a,
  #featurettes2 a {
    color: #ff9e75;
    border-bottom-color: #ff9e75;
  }

  #prefooter {
    background: #242424;
    border-top-color: #3a3a3a;
  }

  /* Forms and panels that hardcode a white background in styles.css. */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  textarea,
  select,
  .recurly-hosted-field {
    background-color: #262626;
    border-color: #4a4a4a;
    color: #e9e9e9;
  }

  .panel,
  .well {
    background-color: #242424;
    border-color: #3a3a3a;
    color: #e9e9e9;
  }

  /* styles.css fades the submit button to rgba(255,208,0,.8), which goes muddy over a dark page. */
  .btn-primary,
  button.form-submit,
  input.form-submit {
    background-color: #ffd000;
    color: #1b1b1b;
  }
  .btn-primary:hover,
  button.form-submit:hover,
  input.form-submit:hover {
    background-color: #393939;
    color: #ffffff;
  }

  /*
   * Everything below fixes the bug reported from an iPhone on 2026-10-06: the dashboard was
   * unreadable in iOS dark mode, light text sitting on white, pale green and yellow.
   *
   * Cause: the block above gives body a light `color` but only pairs it with a dark
   * `background-color` on a handful of containers. Every panel that sets its own light
   * background in the congruent module CSS (member-functionality-structure.css, staff.css,
   * global-styling.css) kept that background and inherited the light text, so it vanished.
   *
   * The rule that keeps this from coming back: in here, never set a background without also
   * setting a colour on the same selector, and never rely on an inherited colour landing on a
   * background you have not darkened yourself.
   */

  /* Dashboard panels. .dashboard-section is set to #fff by BOTH styles.css and
     member-functionality-structure.css, so it needs covering once here. */
  .dashboard-section,
  .member-action-page.header,
  .member-action-page.main,
  .new-site-nav-main,
  ul#nav-bar,
  .new-site-nav li a {
    background-color: #242424;
    color: #e9e9e9;
  }

  #campaign-widget,
  .dashboard-user-memberships .staff-only,
  .gray-bg {
    background-color: #2a2a2a;
    color: #e9e9e9;
  }

  /* Staff-only blocks (visible to Tyee admins, not to donors).
     staff.css sets .dashboard-section.for-staff with !important, so this has to match it. */
  .for-staff,
  .dashboard-section.for-staff {
    background-color: #1f2a1f !important;
    color: #e6f0e2;
  }

  /* Drupal's contextual-links button: off-screen until focused, then white. Admin-only
     chrome, but it is invisible on focus without this. */
  .contextual .trigger,
  .contextual-region .contextual .contextual-links,
  .contextual-region .contextual .contextual-links li,
  .contextual-region .contextual .contextual-links a {
    background-color: #2a2a2a;
    color: #e9e9e9;
  }

  /* Muted helper text. The greys these use read fine on white but drop to ~2.3:1 on the
     dark page, so they need lifting rather than leaving inherited. */
  .form-item__description,
  .form-item__description *,
  .form-item__label.is-disabled,
  em.placeholder,
  .form-item .description,
  .form-composite > .fieldset-wrapper > .description,
  .form-type-radio .description,
  .form-type-checkbox .description,
  .description,
  .testimonial p,
  #people h3 {
    color: #b4b4b8;
  }

  /* Local task tabs (tabs.css). */
  .tabs a.is-active {
    background-color: #333333;
    color: #ffffff;
  }
  .tabs a:focus,
  .tabs a:hover {
    background-color: #3d3d3d;
    color: #ffffff;
  }

  /* Status/warning/error messages. Donors see these after saving anything, so they
     matter more than the staff panels do. */
  .messages--status {
    background-color: #1f2a1f;
    color: #d6ecd0;
  }
  .messages--warning {
    background-color: #332b1a;
    color: #f5e3bd;
  }
  .messages--error {
    background-color: #33211e;
    color: #f7d5ce;
  }
  .messages--status a,
  .messages--warning a,
  .messages--error a {
    color: #ffb48f;
  }
  .gray-bg code,
  code.congruent-debug {
    background-color: #333333;
    color: #e9e9e9;
  }

  /* Tables: headers and row states all hardcode pale backgrounds. */
  thead th,
  .responsive-enabled th,
  .view th {
    background-color: #2d2d33;
    color: #e9e9e9;
  }
  .responsive-enabled th.is-active,
  .view th.is-active {
    background-color: #363642;
    color: #ffffff;
  }
  .responsive-enabled td.is-active,
  .view td.is-active,
  td.is-active {
    background-color: #272730;
    color: #e9e9e9;
  }
  tbody tr:hover,
  tbody tr:focus,
  .responsive-enabled tr:hover td.is-active,
  .view tr:hover td.is-active {
    background-color: #30303a;
    color: #ffffff;
  }
  tbody tr.color-warning:hover,
  tbody tr.color-warning:focus,
  tr.color-warning:hover,
  tr.color-warning:focus {
    background-color: #3a3222;
    color: #ffe9b8;
  }
  tbody tr.color-error:hover,
  tbody tr.color-error:focus,
  tr.color-error:hover,
  tr.color-error:focus {
    background-color: #3a2724;
    color: #ffd9d2;
  }

  /*
   * Surfaces that stay light on purpose, so they need dark text forced back on.
   * The header keeps the brand yellow because tyeebuilders.svg is black ink on transparent
   * and would disappear on a dark band.
   */
  header,
  header *,
  mark,
  .form-submit,
  a.action,
  .dashboard-section a.action,
  .form-actions a.button {
    color: #1b1b1b;
  }

  /* Links need to work on the dark panels above, not just on the page background. */
  .dashboard-section a,
  .for-staff a,
  .gray-bg a,
  #campaign-widget a,
  a.is-active,
  a.external-link,
  a.link-margin-right {
    color: #ffb48f;
    border-bottom-color: #ffb48f;
  }
  header a,
  .form-submit a,
  a.action {
    color: #1b1b1b;
  }
}