/* =====================================================================
   GINA SWEETS — BRAND ACCENT TOKENS
   =====================================================================
   The six sauce colours are the brand's ONLY accent palette. They are
   defined here once and shared by the link page (styles/link.css) and the
   ordering app (styles/app.css). Never write a raw sauce hex anywhere else.

   Cream + brown remain the dominant foundation; these are accents only.

   Ordering rules baked into the values below:
     Chocolate  is the darkest.
     Lotus      is clearly lighter and warmer than Chocolate.
     Caramel    is clearly lighter than Lotus.
     Berry      is clearly darker / more purple than Strawberry.
     Pistachio  is muted olive, never neon.

   Each colour also ships an `-rgb` channel triplet so accents can be mixed
   with the cream/brown foundation at low alpha, e.g.

       border-color: rgb(var(--sauce-berry-rgb) / .35);

   To restyle a flavour, change it here and it updates everywhere.
   ===================================================================== */

:root {
  /* ---------- the six sauce accents ---------- */
  --sauce-chocolate:  #3A2214;   /* deepest dark chocolate                */
  --sauce-lotus:      #A9663A;   /* rich biscuit brown, warmer than choc  */
  --sauce-caramel:    #D29341;   /* light golden amber                    */
  --sauce-strawberry: #CE3439;   /* natural rich red                      */
  --sauce-berry:      #6E1F3F;   /* deep wine red-purple                  */
  --sauce-pistachio:  #7C8C46;   /* muted natural olive-green             */

  --sauce-chocolate-rgb:   58  34  20;
  --sauce-lotus-rgb:      169 102  58;
  --sauce-caramel-rgb:    210 147  65;
  --sauce-strawberry-rgb: 206  52  57;
  --sauce-berry-rgb:      110  31  63;
  --sauce-pistachio-rgb:  124 140  70;

  /* Darkened pistachio, used only where white text sits on a solid fill.
     #7C8C46 on white is 3.7:1 — below AA for body text — so solid buttons
     use these instead. #5E6B32 on white is 5.8:1. */
  --sauce-pistachio-deep:   #5E6B32;
  --sauce-pistachio-deeper: #4C5828;

  /* Channel triplet for the existing gold, so the accent machinery in
     app.css has a neutral fallback for any item without a sauce mapping. */
  --gold-rgb: 194 154 91;
}
