/* ============================================================
   KleanKlub — Colour tokens
   Primary brand colour is the deep logo blue (#0F5A97).
   ============================================================ */
:root {
  /* ---- Brand blues (base ramp) ---- */
  --kk-blue:        #0F5A97; /* primary — deep logo blue */
  --kk-blue-dark:   #0B4675; /* hover / pressed primary */
  --kk-blue-darker: #083758; /* deep sections, footers-on-blue, hero base */
  --kk-blue-mid:    #3D82BF; /* gradient stop, lighter accents */
  --kk-blue-light:  #E6F0F9; /* tinted surfaces, icon chips, hover bg */

  /* ---- Neutrals ---- */
  --kk-white:       #FFFFFF;
  --kk-off-white:   #F5F7FA; /* page-section alt background */
  --kk-grey-light:  #EAECEF; /* borders, dividers */
  --kk-grey:        #6B7280; /* secondary / muted text */
  --kk-grey-dark:   #374151; /* labels, strong secondary text */
  --kk-ink:         #1A1F2E; /* primary text + dark footer bg */

  /* ---- Semantic status ---- */
  --kk-red:         #E03131; /* errors / destructive */
  --kk-red-bg:      #FEF2F2;
  --kk-green:       #2E7D32; /* success / confirmation */
  --kk-amber:       #F59E0B; /* review stars / ratings */

  /* ============================================================
     Semantic aliases — prefer these in components
     ============================================================ */
  --kk-primary:           var(--kk-blue);
  --kk-primary-hover:      var(--kk-blue-dark);
  --kk-primary-active:     var(--kk-blue-darker);
  --kk-on-primary:         var(--kk-white);

  --kk-text:               var(--kk-ink);
  --kk-text-muted:         var(--kk-grey);
  --kk-text-strong:        var(--kk-grey-dark);
  --kk-text-on-dark:       var(--kk-white);
  --kk-text-on-dark-muted: rgba(255,255,255,0.8);

  --kk-surface:            var(--kk-white);
  --kk-surface-alt:        var(--kk-off-white);
  --kk-surface-tint:       var(--kk-blue-light);
  --kk-surface-dark:       var(--kk-blue-darker);
  --kk-surface-inverse:    var(--kk-ink);

  --kk-border:             var(--kk-grey-light);
  --kk-border-strong:      #D4D8DE;
  --kk-focus-ring:         var(--kk-blue);

  --kk-link:               var(--kk-blue);

  /* Signature hero / banner gradient */
  --kk-gradient-hero: linear-gradient(135deg, var(--kk-blue-darker) 0%, var(--kk-blue) 60%, var(--kk-blue-mid) 100%);
}