/**
 * Brand — supplemental tokens and logo box.
 *
 * The brand ramp itself is NOT defined here. `inc/customizer.php` emits it inline
 * from `trendmix_theme_palettes()` as part of `trendmix_color_preset`, which is
 * what the "ألوان الموقع" admin screen writes to. Duplicating the ramp in a
 * stylesheet is what created the drift this file was added to clean up: the
 * theme declared the same colours in several places, and whichever loaded last
 * silently won.
 *
 * So this file only covers what the PHP palette does not emit:
 *   - the deeper ramp steps and neutral surfaces
 *   - the border and text tiers, which carried a maroon cast under the old
 *     primary and read faintly warm against green
 *   - the Custom Logo box
 *
 * @package TrendMix
 */

:root,
html[data-theme] {
  /* ---------- Deeper primary steps ----------
     The palette emits 50-300 plus dark/light; 700-900 are not part of it. */

  --ui-primary-700: #057a4c;
  --ui-primary-800: #04603c;
  --ui-primary-900: #034d31;

  --color-primary-500: #0fa96b;
  --color-primary-600: #057a4c;
  --color-primary-700: #04603c;
  --color-primary-800: #034d31;

  /* ---------- Deeper accent steps ---------- */

  --ui-accent-50: #e6f7f4;
  --ui-accent-100: #c4ece5;
  --ui-accent-200: #9adfd3;
  --ui-accent-300: #63cdbc;
  --ui-accent-700: #0a5f6b;
  --ui-accent-800: #084b55;
  --ui-accent-900: #063b43;

  /* ---------- Surfaces ---------- */

  --ui-surface-primary: #ffffff;
  --ui-surface-secondary: #f7faf9;
  --ui-surface-tertiary: #f1f9f5;
  --ui-surface-quaternary: #eaf7f3;

  /* ---------- Borders ---------- */

  --ui-border-light: rgba(18, 45, 38, 0.10);
  --ui-border-medium: rgba(18, 45, 38, 0.16);
  --ui-border-strong: rgba(18, 45, 38, 0.28);

  /* `border-ruby` keeps its name for compatibility; the value follows the brand. */
  --ui-border-ruby: rgba(15, 169, 107, 0.20);

  /* ---------- Text ---------- */

  --ui-text-primary: #12211d;
  --ui-text-secondary: #41544e;
  --ui-text-muted: #5f736d;
  --ui-text-subtle: #5f736d;
  --ui-text-headings: #12211d;
  --ui-text-inverse: #ffffff;

  /*
   * Text and rules that sit ON a saturated brand surface.
   *
   * --ui-on-brand-ink is referenced by `.ab-eyebrow--light` but the PHP palette
   * never emitted it, and it used to live in a duplicate :root block that has
   * since been removed. With no definition the declaration was invalid, the
   * colour was inherited, and dark eyebrows rendered dark-on-dark. Defined here
   * so the reference resolves.
   */
  --ui-on-brand-ink: #d9fff0;
  --ui-on-brand-rule: #d9fff0;

  --ui-neutral-900: #22302c;
  --ui-neutral-950: #101a17;
}

/* ==========================================================================
   Header logo

   The artwork comes from the Customizer. This only fixes its box: the PNG is a
   1.68:1 lockup, so a fixed height with auto width keeps it undistorted. The
   width/height attributes in the markup are only a layout hint and are
   overridden here.
   ========================================================================== */

.site-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.site-logo__mark,
.footer-logo__mark {
  display: inline-flex;
  align-items: center;
}

.site-logo__mark img,
.footer-logo__mark img {
  display: block;
  width: auto;
  height: 54px;
  max-width: 100%;
  object-fit: contain;
}

@media (max-width: 1024px) {
  .site-logo__mark img,
  .footer-logo__mark img {
    height: 46px;
  }
}

@media (max-width: 768px) {
  .site-logo__mark img {
    height: 40px;
  }
}

/* ==========================================================================
   Badge contrast

   The figure sits on a saturated emerald panel, so it needs to be lighter than
   a mid tone to stay legible.
   ========================================================================== */

.tm-home-about__badge strong {
  color: #d9fff0;
}