/* ============================================================
   hop & cotton — Colour tokens
   Source: hopandcotton Branding Guideline 2019 V1
   ============================================================ */
:root {
  /* ---- Core neutrals ---------------------------------------- */
  --hc-white:        #FFFFFF;
  --hc-black:        #000000;
  --hc-slate:        #767679;   /* brand ink — the logo colour      */
  --hc-slate-light:  #B2B2B4;   /* secondary grey                   */

  /* ---- Brand rose / pink ------------------------------------ */
  --hc-pink-pale:    #F7D9DA;   /* pale rose                        */
  --hc-rose:         #F0AEAD;   /* primary accent rose              */

  /* ---- Soft pastel background palette ----------------------- */
  --hc-peach:        #F3D7C1;
  --hc-pink-soft:    #F2D3D2;
  --hc-blush:        #EEE0DC;
  --hc-cream:        #F1EEE3;
  --hc-warm-white:   #F0E7E4;
  --hc-lilac-pink:   #E7D2DD;
  --hc-powder-blue:  #C6D3E4;
  --hc-sand:         #F0DEC3;
  --hc-lavender:     #D2D0E5;
  --hc-peach-pink:   #F8E1DC;
  --hc-mint:         #DBE6E1;

  /* ---- Extended ink steps (derived from slate) -------------- */
  --hc-ink-900:      #3A3A3D;   /* darkest text                     */
  --hc-ink-700:      #555558;
  --hc-ink-500:      #767679;   /* = slate                          */
  --hc-ink-300:      #9A9A9D;
  --hc-ink-200:      #B2B2B4;   /* = slate-light                    */
  --hc-ink-100:      #DBDBDC;
  --hc-line:         #E7E5E2;   /* hairline on warm surfaces        */

  /* ---- Rose depth steps (derived) --------------------------- */
  --hc-rose-700:     #C98583;   /* pressed / deep rose              */
  --hc-rose-600:     #DD9794;   /* hover                            */
  --hc-rose-500:     #F0AEAD;   /* = rose                           */
  --hc-rose-200:     #F7D9DA;   /* = pink-pale                      */
  --hc-rose-50:      #FBEEEE;   /* tint wash                        */

  /* ============================================================
     SEMANTIC ALIASES — use these in components
     ============================================================ */

  /* Text */
  --text-strong:     var(--hc-ink-900);
  --text-body:       var(--hc-slate);
  --text-muted:      var(--hc-ink-300);
  --text-on-rose:    var(--hc-white);
  --text-on-dark:    var(--hc-white);
  --text-inverse:    var(--hc-white);

  /* Surfaces */
  --surface-page:    var(--hc-white);
  --surface-warm:    var(--hc-warm-white);
  --surface-cream:   var(--hc-cream);
  --surface-card:    var(--hc-white);
  --surface-rose:    var(--hc-rose);
  --surface-rose-soft: var(--hc-rose-50);
  --surface-blush:   var(--hc-blush);

  /* Lines & borders */
  --border-subtle:   var(--hc-line);
  --border-default:  var(--hc-ink-100);
  --border-strong:   var(--hc-ink-200);
  --border-focus:    var(--hc-rose);

  /* Interactive — primary (rose) */
  --action-primary:        var(--hc-rose-500);
  --action-primary-hover:  var(--hc-rose-600);
  --action-primary-press:  var(--hc-rose-700);
  --action-primary-text:   var(--hc-white);

  /* Interactive — ink (slate) */
  --action-ink:            var(--hc-slate);
  --action-ink-hover:      var(--hc-ink-700);
  --action-ink-press:      var(--hc-ink-900);

  /* Status (kept gentle, on-brand) */
  --status-success:  #7BA890;
  --status-warning:  #D9A86A;
  --status-error:    #C97E7C;
  --status-info:     var(--hc-powder-blue);

  /* Focus ring */
  --focus-ring:      0 0 0 3px rgba(240, 174, 173, 0.45);
}