/* ==========================================================================
   Replenish — Design Tokens
   SINGLE SOURCE OF TRUTH for the website AND the transactional emails.

   The email templates (e.g. replenish_d10_final.html) are the origin of this
   palette. Where an email colour meets WCAG AA on the web, it is used
   unchanged. Where it does not, a web-safe sibling is added and the email
   value is kept for reference so the two never silently drift apart.

   Email clients cannot use CSS custom properties — email templates must
   hard-code the hex values. The "EMAIL HEX" comment on each token is the
   value to paste into the email. Change it here, change it there.
   ========================================================================== */

:root {

  /* ---- Brand orange ------------------------------------------------------
     --orange is the signature colour and is shared verbatim with the email.
     It is DECORATIVE ONLY: white text on it is 2.84:1 and fails WCAG.
     Use --orange-action for any surface carrying white text.               */
  --orange:         #FF6B35;   /* EMAIL HEX #FF6B35 — glows, orbs, accents  */
  --orange-action:  #C63F14;   /* white text on this = 5.09:1 (AA)          */
  --orange-dark:    #D94A1B;   /* large accent text on cream = 4.04:1       */
  --orange-deep:    #9C2A0E;   /* body-size accent text on cream = 7.26:1   */

  /* ---- Warm dark surfaces ------------------------------------------------
     Espresso, not black. Taken from the email's dark hero gradient.        */
  --espresso:       #210B02;   /* EMAIL HEX #210B02 — dark panel base       */
  --espresso-deep:  #1C0A00;   /* EMAIL HEX #1C0A00 — deepest shade         */
  --espresso-mid:   #2A0D00;   /* EMAIL HEX #2A0D00 — gradient midpoint     */
  --espresso-warm:  #4A1804;   /* EMAIL HEX #4A1804 — gradient warm end     */

  /* The dark-panel gradient, matching the email hero exactly. */
  --dark-gradient: linear-gradient(135deg, #210B02 0%, #2A0D00 58%, #4A1804 100%);

  /* ---- Cream surfaces ---------------------------------------------------- */
  --cream:          #FAF3ED;   /* EMAIL HEX #FAF3ED — primary warm surface  */
  --cream-2:        #F7EFE8;   /* EMAIL HEX #F7EFE8 — secondary surface     */
  --paper:          rgba(255, 255, 255, 0.88);
  --paper-solid:    #FFFFFF;

  /* ---- Ink (text on light surfaces) -------------------------------------
     Contrast is measured against --cream (#FAF3ED).                        */
  --ink:            #241109;   /* EMAIL HEX #241109 — 16.48:1 AAA           */
  --muted:          #6E5547;   /* EMAIL HEX #6E5547 —  6.26:1 AA            */
  --soft:           #8F6B58;   /* EMAIL HEX #8F6B58 —  4.33:1 LARGE TEXT
                                  ONLY. Do not use below 19px/24px bold.    */

  /* ---- Text on dark surfaces --------------------------------------------- */
  --on-dark:        #FFFFFF;   /* 18.86:1 on espresso                       */
  --on-dark-muted:  #C99E89;   /* EMAIL HEX #C99E89 — 7.85:1 on espresso    */

  /* ---- Semantic ---------------------------------------------------------- */
  --green:          #0F6B3A;   /* web-safe. EMAIL HEX #128247 is 4.43:1 and
                                  narrowly fails AA on cream; this is 5.6:1 */
  --green-soft:     #E7F3EC;

  /* ---- Lines & elevation -------------------------------------------------- */
  --line:           rgba(36, 17, 9, 0.14);
  --line-strong:    rgba(36, 17, 9, 0.22);

  --shadow:         0 28px 80px rgba(33, 11, 2, 0.15);
  --shadow-soft:    0 16px 45px rgba(33, 11, 2, 0.10);
  --shadow-card:    0 12px 34px rgba(33, 11, 2, 0.06);
  --shadow-dark:    0 24px 60px rgba(0, 0, 0, 0.28);

  /* ---- Page background ---------------------------------------------------
     Warm gradient wash. Mirrors the email's body treatment.                */
  --page-bg:
    radial-gradient(circle at 6% 3%,  rgba(255, 107, 53, 0.15), transparent 26%),
    radial-gradient(circle at 90% 7%, rgba(255, 196, 146, 0.30), transparent 28%),
    linear-gradient(180deg, #FFFCFA 0%, #FDF6F0 36%, #FFFFFF 100%);

  /* ---- Geometry ---------------------------------------------------------- */
  --radius-sm:      18px;
  --radius:         28px;
  --radius-lg:      36px;
  --max:            1180px;

  /* ---- Type -------------------------------------------------------------- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;   /* email pull-quotes    */

  /* ---- Focus ------------------------------------------------------------- */
  --focus: 0 0 0 3px #FFFFFF, 0 0 0 6px var(--orange-deep);
}