/* ============================================
   Tanline — Color tokens
   Palette from the Tanline Brand Guideline.
   ============================================ */

:root {
  /* ---- Brand palette (raw) ---- */
  --tl-lychee:       #FEF0DD;  /* warm cream — the signature base */
  --tl-apple:        #A5D1A6;  /* soft sage green */
  --tl-watermelon:   #F7ACB3;  /* light blush pink */
  --tl-tangerine:    #F69577;  /* warm peach-coral */
  --tl-dragonfruit:  #E24C71;  /* vivid raspberry — hero accent */
  --tl-papaya:       #F07750;  /* sunny orange */
  --tl-aquamarine:   #71CAC5;  /* ocean teal */
  --tl-butter:       #FCE287;  /* butter yellow */

  /* ---- Ink & paper neutrals ---- */
  --tl-ink:          #1E1A17;  /* near-black warm charcoal — logo ink */
  --tl-ink-soft:     #5C534B;  /* muted brown-grey body text */
  --tl-ink-faint:    #9A8E83;  /* captions, meta */
  --tl-paper:        #FFFBF4;  /* lightest off-white surface */
  --tl-cream:        #FEF0DD;  /* alias of lychee for surfaces */
  --tl-sand:         #F6E7CF;  /* slightly deeper cream — hairlines, fills */
  --tl-white:        #FFFFFF;

  /* ---- Tint washes (10–18% over cream) for soft fills ---- */
  --tl-dragonfruit-wash: #FBE0E5;
  --tl-aquamarine-wash:  #DEF1EF;
  --tl-papaya-wash:      #FBE2D6;
  --tl-butter-wash:      #FEF6D7;
  --tl-apple-wash:       #E5F1E5;

  /* ============================================
     Semantic aliases — use these in components
     ============================================ */

  /* Brand / primary */
  --color-brand:            var(--tl-dragonfruit);
  --color-brand-hover:      #C93C5F;   /* dragonfruit darkened ~8% */
  --color-brand-active:     #B23253;
  --color-on-brand:         var(--tl-lychee);

  --color-accent:           var(--tl-aquamarine);
  --color-accent-hover:     #5DB8B3;
  --color-on-accent:        var(--tl-ink);

  --color-sun:              var(--tl-papaya);
  --color-highlight:        var(--tl-butter);

  /* Text */
  --text-strong:    var(--tl-ink);
  --text-body:      var(--tl-ink-soft);
  --text-muted:     var(--tl-ink-faint);
  --text-on-color:  var(--tl-lychee);
  --text-brand:     var(--tl-dragonfruit);

  /* Surfaces */
  --surface-page:      var(--tl-lychee);
  --surface-card:      var(--tl-paper);
  --surface-raised:    var(--tl-white);
  --surface-sunken:    var(--tl-sand);
  --surface-inverse:   var(--tl-ink);

  /* Lines & borders */
  --border-hairline:  #EAD9BF;        /* warm hairline on cream */
  --border-strong:    var(--tl-ink);
  --border-brand:     var(--tl-dragonfruit);

  /* Status (kept on-brand) */
  --color-success:  var(--tl-apple);
  --color-warning:  var(--tl-butter);
  --color-danger:   var(--tl-dragonfruit);
  --color-info:     var(--tl-aquamarine);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(226, 76, 113, 0.35);
}