/* ============================================================================
   MELON BRAND KIT — melon-compat.css
   ----------------------------------------------------------------------------
   Layer 3 — legacy variable-name aliases. Load AFTER melon-tokens.css, BEFORE
   the app's own stylesheet.

   Purpose: every existing Melon portal already has its own accent-token
   contract (--accent, --color-melon, etc). This file re-points those EXISTING
   names at the brand ramp, so an app can adopt the kit without touching a
   single var(--accent) call site anywhere in its templates. That is what makes
   estate-wide adoption a near-zero-diff PR instead of a rewrite.

   New sites do not need this file — it exists purely for migrating old ones.
   ============================================================================ */

/* --------------------------------------------------------------------------
   The `:root, body` selector list is LOAD-BEARING, not sloppiness.

   Custom-property substitution resolves at the element where the declaration
   sits. If these aliases lived only on :root, they would freeze to the
   html-level --brand-primary and the body-level [data-env="uat"] override in
   melon-tokens.css would silently stop working (body's --accent would still
   read the :root-level --brand-primary, ignoring body's own override).
   Declaring the aliases on BOTH :root and body lets each re-resolve against
   its own --brand-primary. Do not "clean this up" to a single selector.
   -------------------------------------------------------------------------- */
:root, body {
  /* Assets-Portal / Toolbox-Portal / Tracker-Portal / Kiosk-Portal contract
     (public_html/assets/style.css in each) */
  --accent:              var(--brand-primary);
  --accent-dark:         var(--brand-primary-deep);
  --accent-light:        var(--brand-primary-light);
  --accent-bg:           var(--brand-primary-bg);
  --accent-bg-subtle:    var(--brand-primary-wash);
  --accent-hover-shadow: rgb(var(--brand-primary-rgb) / 0.18);
  --accent-focus-ring:   rgb(var(--brand-primary-rgb) / 0.18);
  --accent-soft:         var(--brand-primary-light);
  --accent-hover:        var(--brand-primary-deep);
  --accent-on-dark:      var(--brand-primary-light);

  /* Assets-Portal legacy pre-env-theming alias */
  --color-primary:       var(--brand-primary);
  --color-primary-dark:  var(--brand-primary-deep);
  --color-primary-pale:  var(--brand-primary-wash);

  /* Kiosk-Portal-CRM Tailwind v4 @theme names (resources/css/app.css) */
  --color-melon:         var(--brand-primary);
  --color-melon-dark:    var(--brand-primary-deep);

  /* servicedesk-portal (src/http/views.ts hardcodes '#16a34a' today — this
     alias is here so a future refactor has somewhere correct to point) */
  --theme-color:         var(--brand-primary);
}