/* ==========================================================================
   Blend — Colour
   --------------------------------------------------------------------------
   The Blend palette is six vivid "blend" hues used at full saturation, almost
   always as flat fields or as the tint in duotone animal photography. They are
   loud, optimistic and non-corporate. Ink (near-black navy) + a cool grey scale
   carry all the structure; white is the dominant ground in documents and the
   logo colour on every vivid field.
   ========================================================================== */

:root {
  /* ---- Brand hues (the six blends) ------------------------------------- */
  --magenta:  #E6007E;   /* hero / primary accent */
  --purple:   #662483;
  --blue:     #1D71B8;
  --green:    #3AAA35;
  --gold:     #F9B233;
  --orange:   #E94E1B;

  /* Tints (≈18% over white) — for soft backgrounds, hover wells, chips */
  --magenta-tint: #FCE0F0;
  --purple-tint:  #ECE3F2;
  --blue-tint:    #E3EFF8;
  --green-tint:   #E5F4E4;
  --gold-tint:    #FEF3DD;
  --orange-tint:  #FCE6DD;

  /* Shades (≈18% toward ink) — for pressed states, text on tint */
  --magenta-deep: #B00062;
  --purple-deep:  #4C1A62;
  --blue-deep:    #155A93;
  --green-deep:   #2C8429;
  --gold-deep:    #D98F12;
  --orange-deep:  #C53D11;

  /* ---- Ink + neutrals -------------------------------------------------- */
  --ink:        #1B1B2E;   /* primary text, dark grounds, near-black navy */
  --ink-soft:   #34344A;   /* secondary dark surface */
  --grey-900:   #2B2B33;
  --grey-700:   #4D4D4D;   /* brand grey (from source decks) */
  --grey-500:   #7A7A86;
  --grey-300:   #B8B8C0;
  --grey-200:   #DDDDDD;   /* brand light grey (from source decks) */
  --grey-100:   #EFEFF2;
  --grey-50:    #F7F7F9;
  --white:      #FFFFFF;

  /* ---- Semantic aliases ------------------------------------------------ */
  --brand-primary:        var(--magenta);
  --brand-primary-deep:   var(--magenta-deep);
  --brand-primary-tint:   var(--magenta-tint);

  --text-strong:    var(--ink);
  --text-body:      var(--grey-900);
  --text-muted:     var(--grey-500);
  --text-on-dark:   var(--white);
  --text-on-brand:  var(--white);
  --text-link:      var(--magenta);

  --surface-page:     var(--white);
  --surface-subtle:   var(--grey-50);
  --surface-card:     var(--white);
  --surface-sunken:   var(--grey-100);
  --surface-ink:      var(--ink);
  --surface-inverse:  var(--ink);

  --border-subtle:  var(--grey-200);
  --border-strong:  var(--grey-300);
  --border-ink:     var(--ink);

  /* ---- Status (mapped onto brand hues) --------------------------------- */
  --success: var(--green);
  --info:    var(--blue);
  --warning: var(--gold);
  --danger:  var(--orange);

  /* ---- Focus ring ------------------------------------------------------ */
  --focus-ring: var(--blue);
}